这可能是一个初学者问题,但我不知所措。
我的目标是有一个按钮,当按下该按钮时,该按钮所在的类会做一些事情......如果这有意义的话......这是我在页面上的内容的代码:
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。我该怎么做?
最佳答案
使用
$('#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()
});
关于javascript - Jquery - 使用 .click() 定位 1 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24759175/