У меня есть следующий 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 повторяется в другом месте).
Вы ошибаетесь, потому что, похоже, вы предполагаете, что .siblings()
каким-то образом обработает селектор и перейдет вниз из поколения .more
чтобы найти элемент .img-circle
. Это не так, как это работает.
.siblings()
будет искать родственного брата, соответствующего прошедшему селектору; в вашем случае это ".caller > img.img-circle"
, и .more
элемент не имеет братьев и сестер, соответствующие этим. Поэтому ваш вызов .siblings()
возвращается пустым.
Как указывали другие, вы можете использовать что-то вроде:
$(this).siblings('.caller').find('.img-circle').toggleClass('transparent');
для справки: http://api.jquery.com/siblings/
Вы можете использовать .prev(), он получает непосредственно предшествующий родственный элемент каждого элемента в наборе согласованных элементов, необязательно отфильтрованный селектором.
$(this).prev().find("img.img-circle").toggleClass("transparent");
если вы хотите использовать .siblings()
тогда
$(this).siblings(".caller").find("img.img-circle").toggleClass("transparent");
пытаться
$('.more').on('click', function(e) {
$(this).parent().find('.img-circle').toggleClass("transparent");
});
Рабочий пример: http://jsfiddle.net/yiernehr/B2Bcf/1/
можешь попробовать
$(this).parent().find(".caller > img.img-circle").toggleClass("transparent");