Question

编辑：有些人很快就回答了我的问题。这是一个非常明显的错误，我只是通过将#buttonclose更改为.buttonclose来解决。感谢大家及时回复！

我有三个div（＃window1，＃window2和＃window3），每个div都有一个按钮（#buttonclose）。当你点击它的相应按钮时，我正试图弄清楚如何淡化每个div。

到目前为止，这就是我对该功能的要求：

$('#buttonclose').click(function(){
$('#window1').fadeOut(300);
});

这适用于#window 1，但我无法弄清楚如何使它适用于＃window2和＃window3。

希望你能帮助我。我真的很感激！谢谢！

Answer 1

首先，ID应该是元素的唯一标识符，因此不允许具有id为buttonclose的多个元素。在你的情况下，你可能会把它变成一个类。

然后，在某种程度上取决于DOM结构，你可以这样做：

$(".buttonclose").on("click", function () {
   $(this).parent().fadeOut(300);
});

DEMO

这要求隐藏的元素是按钮的直接父级，因此您可能需要稍微修改它以更好地满足您的需求。

如果元素嵌套得更深，那么像.closest()这样的方法可能会对你有所帮助，找到适合隐藏的祖先。

如果元素不是按钮的祖先，那么您需要一些其他方法将按钮与要隐藏的元素相关联，例如在按钮元素上使用data-*属性，并存储值它，就像要关闭的元素的ID一样。然后在单击按钮时读取该值，并选择合适的元素。

Answer 2

假设这样的HTML：

<div id="window1">This is window 1 <span class="closeButton">Close</span> 
</div>
<div id="window1">This is window 2 <span class="closeButton">Close</span>
</div>
<div id="window1">This is window 3<span class="closeButton">Close</span>
</div>

您只需访问按钮的父级即可淡化：

$(".closeButton").button().click(function () {
  $(this).parent().fadeOut(300);
});

看到这个小提琴：http://jsfiddle.net/q6sQX/2/

将“fadeOut”点击功能分配给多个DIVS

2 个答案: