使用jQuery隱藏和顯示具有相同類的類

-2

我正在創建一個工具，該工具根據輸入到數組中的數據生成一堆div，但它們都具有相同的類。這個想法是，當一個鏈接被點擊時，它會顯示「.catbox」div中的一個，並隱藏其餘的。使用jQuery隱藏和顯示具有相同類的類

所有這些div都有相同的類，所以我需要遍歷它們，但我不太清楚jQuery如何做到這一點。目前點擊最後一個「.list」類會觸發點擊事件而不是全部點擊事件，目前它會顯示所有帶有「.catbox」類的div而不是相應的。

下面是代碼：

var HTMLcatName = '<h1>%data%</h1>'; 
var HTMLcatImage = '<img id="cat" src="%data%">'; 
var HTMLcatCounter = '<p class="counter">Number of clicks: %data%</p>'; 
var HTMLcatList = '<p>%data%</p>' 
var noCats = 'No cats selected m8'; 
var getCounterClass = document.getElementsByClassName("counter"); 

$(document).ready(function() { 

    cats.display(); 
    $('.catbox').hide(); 

    for (u = 0; u < cats.name.length; u++) { 

     formattedCatList = HTMLcatList.replace("%data%", cats.name[u]); 

     var listDiv = document.createElement('div'); 
     listDiv.innerHTML = formattedCatList; 
     listDiv.className = "list"; 

     $(".list").click(function() { 
      $(".catbox").toggle("slow"); 
     });  

     $("body").prepend(listDiv); 
    } 
}); 

var update = function() { 

    for (j = 0; j < getCounterClass.length; j++) { 
     getCounterClass[j].innerHTML = 'Number of clicks: ' + cats.clicks[j]; 
    } 
} 

var cats = { 

    "name": ["Monte", "Jib"], 
    "image": ["images/monte.jpg", "images/jib.jpg"], 
    "clicks": [0, 0], 

    display: function() { 

     for (i = 0; i < cats.image.length; i++) { 

      formattedCatNames = HTMLcatName.replace("%data%", cats.name[i]); 
      formattedCatImages = HTMLcatImage.replace("%data%", cats.image[i]); 
      formattedCatCounter = HTMLcatCounter.replace("%data%", cats.clicks[i]); 

      var catDiv = document.createElement('div'); 
      catDiv.className = "catbox"; 
      catDiv.innerHTML = formattedCatNames + formattedCatImages + formattedCatCounter; 

      catDiv.querySelector('img').addEventListener('click', (function(catCountUp) { 
       return function() { 
        cats.clicks[catCountUp]++; 
        update(); 
      }; 
     })(i)); 
      document.body.appendChild(catDiv); 
     } 
    }, 
}

我需要$內找到（文件）。就緒（函數（）{

任何幫助，將不勝感激

來源

2015-03-30 hufflapuff

頁面上的兩個元素應該有相同的ID。 – 2015-03-30 22:08:09

這個想法是使元素動態，所以我不必每個硬編碼。我只是不確定如何實現類似於jQuery中的for循環。 – hufflapuff 2015-03-30 22:11:09

因爲您沒有使用ID屬性，所以最好不要使用重複值。 – 2015-03-30 22:12:41

幫助的功能。

With $('.list')你得到了一組list類的元素，所以如果你使用$('.list').click();，你將會把點擊事件綁定到一個元素上，你應該使用：

$(".list").each(function(){ 
    $(this).click(function() { 
    $(".catbox").toggle("slow"); 
    }); 
});

來源

2015-03-30 22:10:03

我認爲'.each（）'不是必需的，因爲[jQuery文檔]（http://api.jquery.com/hide/）表示它也適用於元素列表... – RegisteredUser 2015-03-30 22:16:56

你是對的，謝謝：） – 2015-03-30 22:23:40

下可以做到這一點：

$(".list").on("click", function(){ 
    $(this).find(".catbox").toggle("slow"); 
});

來源

2015-03-30 22:24:46 adardesign

使用jQuery隱藏和顯示具有相同類的類

回答

相關問題