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

你错了，因为你似乎假设.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 回答
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 回答
0

您可以使用.prev()，它获取匹配元素集中每个元素的前一个兄弟元素，可选地由选择器过滤。

$(this).prev().find("img.img-circle").toggleClass("transparent");

如果你想使用 .siblings()那么

$(this).siblings(".caller").find("img.img-circle").toggleClass("transparent");
于 2013-10-26T18:52:00.610 回答
0

你可以试试

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

现场演示

于 2013-10-26T18:53:16.750 回答