for循环4 DOM元素和他们的事件在JS

我想循环这3个图像，其次是他们的ul和李。一旦点击，我发现事件处理程序没有在第一个以外的任何图像上进行侦听。请帮助我。for循环4 DOM元素和他们的事件在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);

来源

2017-07-25 Dan Eker

您的事件处理程序在每个图像上单击事件侦听，您的内部逻辑错误，把console.log（）或警报点击处理函数 –

嘿@Nitin，我会试试thanx！ –

你只追加了ul和li元素到第一个复选框。因此，当onclick事件触发其他任何事件时没有任何显示。

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

你需要像你这样的，以便他们能够显示的东西在这里做的第一个复选框给孩子追加到其他复选框。

来源

2017-07-25 07:24:39

好的，我明白了.. thanx！生病让这一去。 –

所以像$ checkboxes [i] .appendChild（$ recipes）; ？ –

是的，就像那个@DanEker一样，但是确保你正在循环所有复选框元素 –

for循环4 DOM元素和他们的事件在JS

回答

相关问题