2

我有一个很大的外部div ，里面有许多相同的圆圈（这是一个较小的div，边框半径为 100%）。

当用户单击它们时，我正在使用 jquery 淡出这些圆圈，但是我想在单击唯一剩余的圆圈时添加其他事件。

:last-child或:nth-child()不会有帮助，因为我不介意点击哪个圆圈，直到只剩下一个圆圈。

同样，元素已淡出，因此它们仍然是可见元素的兄弟姐妹。所以我需要的是选择“最后一个可见”元素。

<div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

</div>

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
    });
    $("XXX").click(function(){
        alert("I was the last of Mohicans");
    });
});
4

4 回答 4

7

为什么不

.circle:first-child:last-child {

?

编辑已编辑的问题：

如果您想在单击时测试该元素是否是唯一可见的元素，您可以这样做：

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
        if ($('.circle:visible').length>1) return; // returns if not the last one
        alert("I was the last of Mohicans");
    });
});
于 2013-01-07T12:11:13.910 回答
3

jQuery 实际上有一个only-child选择器，请参见此处：http ://api.jquery.com/only-child-selector/

（希望我已经理解你在问什么）

根据对问题的编辑，请参见下文：

也许你应该尝试这样的事情：

$(document).ready(function(){
    $(".circle").click(function(){
        var numCircles = $('.circle').length;
        var numFaded = $('.faded').length;
        if( (numCircles - numFaded) == 1 ) {
            alert("I was the last of Mohicans!");
        }
        $(this).fadeOut("slow");
        $(this).addClass("faded");
    });
});

我意识到上面的内容可能不是最佳的（我不是 JavaScript/jQuery 大师），但它应该相当快（只要你不添加很多圈子），它应该可以根据你的需要运行。

请记住，我没有测试上述内容，希望如果它不起作用，它至少应该让你朝着正确的方向前进，但如果你需要更多帮助，请在下面发表评论。

于 2013-01-07T12:16:19.110 回答
1

一种解决方法是为这些 div 增加一个额外的类并且只有一个孩子。当 $(".extraclass :only-child") 被点击而不是添加你的新事件。否则删除你的额外类并应用淡出效果。

于 2013-01-07T12:55:45.440 回答
1 
$(document).ready(function () {
  $(".circle").click(function () {
   var $this = $(this);
   $this.fadeOut("slow");
   if ($this.siblings(':visible').length === 0) {
     alert("I was the last of Mohicans");
   }
 });
});

计算可见的兄弟姐妹是最好的选择......如果你需要，你也可以添加类选择器......

于 2013-01-07T12:57:57.997 回答