javascript - Jquery - 使用 .click() 定位 1 div

Question

这可能是一个初学者问题，但我不知所措。

我的目标是有一个按钮，当按下该按钮时，该按钮所在的类会做一些事情......如果这有意义的话......这是我在页面上的内容的代码:

if(domain == 'google.com') {
$('#content').append('<div id="highlight"><h1 id="headline">'+title+'</h1><img id="dropDown" src="images/small-dropdown.png" alt=""/><img class="card" src="'+URL+'"/></div></br>');
$('.card').hide();     
}

所以代码循环了大约 25 次，然后在我的 content div 中我有一个很好的网站列表。我的下一段代码是:

$("#dropDown").click(function() {
    $('.card').toggle();
});

我遇到的问题是，当我按下 dropDown 按钮时，图像 card 应该只显示 1 个 div，相反，图像显示为每个 div，我只想定位按钮所在的 div。我该怎么做？

Answer 1

使用

$('#content').on('click', "#dropDown", function() {
    $(this).next('.card').toggle(); //Use next()
});

当您动态生成元素时。你应该使用 Event Delegation使用 .on()委托(delegate)事件方法。

同样重要的是:ID 必须是唯一的，所以我建议你使用类选择器

生成元素使用

if(domain == 'google.com') {
$('#content').append('<div id="highlight"><h1 id="headline">'
 + title +'</h1><img class="dropDown" src="images/small-dropdown.png" alt=""/><img class="card" src="'+URL+'"/></div></br>');
$('.card').hide();     
}

事件绑定(bind)

$('#content').on('click', ".dropDown", function() {
    $(this).next('.card').toggle(); //Use next()
});