javascript - 目标特定容器在循环中的 Javascript 中关闭

Question

我试图让我的关闭函数 (deleteRecipe) .fadeOut 包围它的容器而不是底部容器(当前正在发生)。 关闭后，我希望能够单击 undoButton 到 .fadeIn 中的 .fadeOut 删除Recipe

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()
})