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() 委托事件方法。

同样重要：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();     
}

事件绑定

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

Answer 2

为了将事件绑定到动态生成的元素，你应该使用.on()：

http://api.jquery.com/on/

它也适用于非生成元素。

Answer 3

拥有多个具有相同 id 的元素是一件坏事，但你可以使用这样的东西：

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