目标特定的容器，以关闭Javascript中的循环

Question

我想让我的关闭功能（deleteRecipe）.fadeOut周围的容器，而不是底部的容器（目前正在发生）。 关闭后，我希望能够点击undoButton到.fadeIn在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

有几件事情我会注意：

实际上，你可以通过创建元素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() 
})