2

私はその中に多くの同一の円（ボーダー半径100％の小さなdiv ）を持つ大きな外側のdivを持っています。

ユーザーがクリックしたときにこれらの円をフェードアウトするためにjqueryを使用していますが、残りの円だけがクリックされたときに追加のイベントを追加したいと考えています。

:last-childまたは:nth-child()は役に立ちません。どちらの円がクリックされても、そのうちの1つだけが残るまで気にしないからです。

繰り返しますが、要素はFADED OUTであるため、可視要素の兄弟のままです。したがって、「最後に表示された」要素を選択する必要があります。

<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") をクリックすると、新しいイベントが追加されます。それ以外の場合は、extraclass を削除して、フェードアウト効果を適用してください。

于 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 に答える