Question

我正在创建一个工具，根据输入到数组中的数据生成一堆div，但它们都具有相同的类。我们的想法是，当点击一个链接时，它会显示一个＆＃34; .catbox＆＃34; divs并隐藏其余部分。

所有这些div都有相同的类，所以我需要遍历它们，但我不太确定如何使用jQuery完成。目前点击最后一个＆＃34; .list＆＃34; class触发on click事件而不是所有这些事件，并且当前它显示所有具有类＆＃34; .catbox＆＃34;的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);
        }
    },
}

我需要帮助的函数可以在$（document）.ready（function（）{

中找到

非常感谢任何帮助。

Answer 1

以下可以做到：

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

Answer 2

使用$('.list')，您将获得一组类list的元素，因此如果您使用$('.list').click();，则会将click事件绑定到一个元素。你应该使用：

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

使用jQuery隐藏和显示具有相同类的类

2 个答案: