我正在尝试制作用户双击图标的内容,然后具有与图标类值相同的id值的DIV淡出。我有一些有用的东西,但由于某种原因它只适用于第一个DIV。这是我目前的代码:
$('#icon').on('dblclick', function() {
var app = $(this).attr('class');
$('#' + app + '').fadeOut(200);
});
您可以在此处看到它:http://jsfiddle.net/TheInfection/JpMRC/
答案 0 :(得分:2)
那是因为您对多个元素使用一个ID,ID必须是唯一的,jQuery只选择具有特定ID的第一个元素,您应该使用class
es或data-*
属性
<div data-target="one" class="icon">one</div>
<div data-target="two" class="icon">two</div>
<div data-target="three" class="icon">three</div>
<div id="one" class="box">One</div>
<div id="two" class="box">Two</div>
<div id="three" class="box">Three</div>
$('.icon').on('dblclick', function() {
var target = $(this).data('target');
$('#' + target).fadeOut(200);
});
答案 1 :(得分:0)
HTML:
<div class="icon one"></div>
<div class="icon two"></div>
<div class="icon three"></div>
<div id="one" class="box">One</div>
<div id="two" class="box">Two</div>
<div id="three" class="box">Three</div>
JS:
$('.icon').on('dblclick', function() {
var app = $(this).attr('class').split(' ')[1];
$('#' + app).fadeOut(200);
});
upd:我认为先前的决定更好。