for loop 4 DOM 元素及其在 JS 中的事件

Question

我正在尝试循环这 3 个图像，然后是它们的 ul 和 li。单击后，我遇到了一个问题，即事件处理程序没有侦听除第一个图像之外的任何图像。请帮帮我。

Fiddle

JS

var main = function () {

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

        var $checkBoxes = document.createElement('div');
        $checkBoxes.setAttribute("class", "checkBoxes");
        var $recipePicContainer = document.createElement('span');
        $recipePicContainer.setAttribute("class", "recipePicContainer");


        function makeRecipePic() {
            var recipe = document.createElement("IMG");
            recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
            recipe.setAttribute("class", "recipe");
            $recipePicContainer.appendChild(recipe);

        }

        makeRecipePic();

        var mainContainer = document.getElementsByClassName('mainContainer');
        mainContainer[0].appendChild($checkBoxes);

        var $div = document.createElement('div');
        $div.innerHTML = 'CockTails';
        $recipePicContainer.appendChild($div);
        $checkBoxes.appendChild($recipePicContainer);

        var $recipes = document.createElement("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.appendChild(li);
        }
        var b = document.createElement("li");
        li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        li.className = "Instructions";

        $checkboxes[0].appendChild($recipes);
        $('.recipes').hide();
        $('<input type="checkbox" value="1" />').prependTo(".ingredients");
        $('.mainContainer .recipePicContainer').click(function () {
            $(this).next('ul').toggle("slow").toggleClass('selected');

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

Answer 1

您只是将 ul 和 li 元素附加到第一个复选框。因此，当任何其他事件触发 onclick 事件时，没有任何内容可显示。

$checkboxes[0].appendChild($recipes);

您需要像在此处对第一个复选框所做的那样，将子级附加到其他复选框，以便它们显示某些内容。