0

私は次のHTMLを持っています:

<div class="col-md-4">

    <div class="participant" id="participant-1">

        <div class="caller">
            <img src="public/img/caller.png" class="img-circle transparent">
        </div>

        <div class="more"><img src="public/img/more.png"></div>


    </div>
</div>

「詳細」をクリックすると、透明な img クラスを切り替えようとしています。

次のコードがあります。

$(this).siblings(".caller > img.img-circle").toggleClass("transparent");

どこが間違っていますか？トグルが同じ親内のクラスにのみ影響するようにしたい (HTML は別の場所で繰り返される)。

4

4 に答える 4

1

試す

$('.more').on('click', function(e) {
   $(this).parent().find('.img-circle').toggleClass("transparent"); 
});

作業例： http ://jsfiddle.net/yiernehr/B2Bcf/1/

于 2013-10-26T18:56:12.347 に答える
1

.siblings()何らかの方法でセレクターを処理し、要素.moreを見つけるためにの生成から下にトラバースすると想定しているように見えるため、間違っています。.img-circleそれはそれがどのように機能するかではありません。

.siblings()渡されたセレクターに一致する兄弟を探します。あなたの場合、これは".caller > img.img-circle"であり、.more要素にはそれに一致する兄弟がありません。したがって、への呼び出し.siblings()は空を返します。

他の人が指摘したように、次のようなものを使用できます。

$(this).siblings('.caller').find('.img-circle').toggleClass('transparent');

参考までに：http: //api.jquery.com/siblings/

于 2013-10-26T19:08:48.740 に答える
0

あなたが試すことができます

 $(this).parent().find(".caller > img.img-circle").toggleClass("transparent");

ライブデモ

于 2013-10-26T18:53:16.750 に答える