Ориентация на элемент
При нажатии я хочу нацелить ребенка родного брата родителя. Там будет несколько контейнеров. Поэтому, когда удаляется нажатие, я хочу, чтобы img в этом div только менялся.
Это JQuery у меня в настоящее время - не повезло, что мне не хватает дополнительного родителя?
$('.removal').click(function() {
$('this').parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-img">
<img class="productImg" src... />
</div>
<div class="rndm1">
</div>
<div class="rndm1">
</div>
<div class="item-action">
<div class="rndm1"></div>
<p><a class="removal" href="">remove</a></p>
</div>
</div>
2 ответа
Решение
Когда я исправляю две опечатки (кавычки вокруг "this" и класс изображения с орфографической ошибкой), я получаю этот код работающим
$('.removal').on("click",function(e) {
e.preventDefault(); // cancel the click
$(this).closest(".container") // the container div
.find('.productImg') // the image class in question
.addClass('cart-removal-item-img');
});
.cart-removal-item-img { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-img">
<img class="productImg" src="http://lorempixel.com/400/200/sports/" />
</div>
<div class="rndm1">
</div>
<div class="rndm1">
</div>
<div class="item-action">
<div class="rndm1"></div>
<p><a class="removal" href="">remove</a></p>
</div>
</div>
Я буквально ответил на свой вопрос добавить дополнительный.parent()
<script>
$('.removal').click(function(){
$(this).parent().parent().siblings('.item-img').find('.productImage').addClass('cart-removal-item-img')
});
</script>