ループ内のJavascriptで閉じる特定のコンテナをターゲットにする

Question

私のクローズ機能（deleteRecipe）.fadeOut（現在起きているボトムコンテナではなく）を囲むコンテナを作成しようとしています。 は一度閉じて、私は私が注意したいいくつかのことdeleteRecipe

で .fadeOut

はJavaScript

var main = function() { 


var mainContainer = document.getElementsByClassName('mainContainer'); 
var backGroundPic = document.createElement("IMG"); 
backGroundPic.setAttribute("src", "../images/cutting_board.png"); 
backGroundPic.setAttribute("class","backgroundPic"); 
$('body').append(backGroundPic); 


var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert']; 
var recipeArrayLength = recipeArray.length; 
for (var i = 0; i < recipeArrayLength; i++) { 

    var $container = $('#container'); 
    var $contentContainer = $('<div class="col-md-12 col-xs-12" id="contentContainer"></div>'); 
    $($container).append($contentContainer); 

    var $checkBoxesContainer = $('<div class = "checkBoxesContainer"></div>'); 
    var $recipePicContainer = $('<span class = "recipePicContainer"></span> '); 

    function makeRecipePic() { 


     var $recipe = $('<IMG class="recipe">'); 
     $recipe.attr('src', '../images/grasshopper-cocktail.jpg'); 
     $($recipe).css('margin-top', '10px'); 
     $($recipePicContainer).append($recipe); 
    } 

    var $deleteRecipe = $('<span class="fa fa-times-circle aria-hidden true"></span>'); 
    $($checkBoxesContainer).append($deleteRecipe); 


    $deleteRecipe.on('click', function() { 
     $($contentContainer).fadeOut() 
     $($undoButton).fadeIn() 
    }); 

     // 
     //$($deleteRecipe).click(function() { 
     // $(this).find(contentContainer).fadeOut(); 
     // $($undoContainer).fadeIn(); 
     //}); 

    makeRecipePic(); 

    var $undoContainer = $('<div class="col-md-12 col-xs-12" id="undoContainer"></div>'); 
    $(mainContainer[0]).append($undoContainer); 

    var $undoButton = $('<button class="fa fa-undo aria-hidden true"></buton>'); 
     $($undoContainer).append($undoButton); 
     $($undoContainer).hide(); 



    $undoButton.on('click', function() { 
     $($contentContainer).fadeIn(); 
     $($undoButton).fadeOut(); 
    }); 

    //$($undoButton).click(function(){ 
    // $(contentContainer).fadeIn(); 
    // $($undoContainer).fadeOut(); 
    //}); 

    $(mainContainer[0]).append($contentContainer); 
    $($contentContainer).append($checkBoxesContainer); 



    var $div = $('<div></div>'); 
    $div.innerHTML = 'CockTails'; 
    $($recipePicContainer).append($div); 
    $($checkBoxesContainer).append($recipePicContainer); 

    var $recipes = $('<ul class = "recipes"></ul>'); 
    //var checkboxes = document.getElementsByClassName('checkBoxes'); 

    var x = document.createElement("INPUT"); 
    x.setAttribute("type", "checkbox"); 

    for (var j = 1; j <= 6; j++) { 
     var li = document.createElement("li"); 
     li.className = "ingredients"; 
     li.setAttribute("type", "checkbox"); 


     var a = document.createElement("a"); 
     a.innerHTML = "Ingredient " + j; 

     li.appendChild(a); 
     $($recipes).append(li); 
    } 
    var b = document.createElement("li"); 
    li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; 
    li.className = "Instructions"; 

    $($checkBoxesContainer[i]).append($recipes); 
} 
$($recipes).hide(); 
$('<input type="checkbox" value="1" />').prependTo(".ingredients"); 
$('.recipePicContainer').click(function() { 
    $(this).next('ul').slideToggle("slow").toggleClass('selected'); 

}); 

}; 
$(document).ready(main); 

Answer 1

何だったか.fadeInへundoButtonをクリックできるようにしたい：

あなたが実際経由して要素を作成することができますjQueryは、次のようにメモリ内に保存することもできます。

var $container = $('<div class="container"></div>') 

.find()は、DOMを直線的に横断します。両方向に移動したい場合は.closest()を使用しますが、要素を作成するときにすべての変数をjQueryでラップすると宣言した場合は、この手順を回避できます。

あなたのケースでは、$(selector).parent()を介して親を取得することもできますが、作成時にすべてを変数に保存していた場合は不要です。

あなたは最終的なコードは次のようになります：

var $container = $('#container') 
var $contentContainer = $('<div class="col-md-12 col-xs-12"></div>') 
$container.append($contentContainer) 

// ... same for checkboxes area 
var $deleteRecipe = $('<span class="fa fa-times-circle"></span>') 
var $undoButton = $('<button>Undo</button>') 

$checkboxes.append($deleteRecipe) 

$deleteRecipe.on('click', function() { 
    $contentContainer.fadeOut() 
    $undoButton.fadeIn() 
}) 
$undoButton.on('click', function() { 
    $contentContainer.fadeIn() 
    $undoButton.fadeOut() 
})