單擊另一個DIV時，無法將DIV獲取到.fadeOut（）

Question

我正在嘗試做一些使用戶雙擊圖標的操作，然后淡出具有與圖標的類值相同的id值的DIV。 我有類似的作品，但由於某種原因，它僅適用於第一個DIV。 這是我當前的代碼：

$('#icon').on('dblclick', function() {
    var app = $(this).attr('class');
    $('#' + app + '').fadeOut(200);
});

您可以在這里查看它的運行情況： http : //jsfiddle.net/TheInfection/JpMRC/

Answer 1

那是因為您對多個元素使用一個ID，ID必須是唯一的，jQuery僅選擇具有特定ID的第一個元素，而應使用es class或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);
});

http://jsfiddle.net/VqWJp/

Answer 2

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：我認為以前的決定更好。