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

回答

相關問題