Как присвоить класс при нажатии на внутренний блок?
119
20 декабря 2019, 20:00
Есть несколько таких блоков кода, как при нажатии на кнопку отправить присвоить классу mainli ещё один класс active?
<li class="mainli">
<div class="product-h">
<img width="300" height="300" src="img.jpg" />
<div class="product-meta">
<h2 class="woocommerce-loop-product__title">Text</h2>
<div class="case">
<h6>Title6</h6>
<ul class="vkus">
<li class="qwe">...</li>
</ul>
<div class="line">...</div>
</div>
<div class="case">
<h6>...</h6>
<p><span class="ryer">...</span></p>
<div class="line"></div>
</div>
<div class="case">
<h6>...</h6>
<div сlass="smes">
</div>
<ul class="sostav">
<li сlass="case">
<div class="aqwe"><i class="fa fa-circle" aria-hidden="true"></i> txt</div>
<div class="aqwe"></div>
</li>
<li сlass="case-robusta">
<div class="robusta-n robusta-r_70"><i class="fa fa-circle" aria-hidden="true"></i> txt</div>
<div class="robusta-t">txt</div>
</li>
</ul>
<div class="line"></div>
</div>
<span class="price"><span class="woocommerce-Price-amount amount">390 <span class="woocommerce-Price-currencySymbol"></span></span>
</span>
</div>
</a><a class="button product_type_external buys" data-toggle="modal" data-target="#myModal" style="color: white;">Отправить</a></div>
</li>
Мой код присваивает всем mainli класс актив можно как-то это исправить?
<script type="text/javascript">
$(document).ready(function() {
$(".buys").click(function() {
$(".mainli").removeClass("active");
$(".mainli").addClass("active");
return false;
});
});
</script>
Answer 1
в зависимости текущего элемента $(this) и на его ближайшего подходящего родителя .closest(".mainli")
$(document).ready(function() {
$(".buys").click(function() {
$(".mainli").removeClass("active");
$(this).closest(".mainli").addClass("active"); // По правке Igor
return false;
});
});body {
background: gray;
}
a {
cursor: pointer;
}
.mainli.active {
background: #f00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<li class="mainli">
<div class="product-h">
<img width="300" height="300" src="img.jpg" />
<div class="product-meta">
<h2 class="woocommerce-loop-product__title">Text</h2>
<div class="case">
<h6>Title6</h6>
<ul class="vkus">
<li class="qwe">...</li>
</ul>
<div class="line">...</div>
</div>
<div class="case">
<h6>...</h6>
<p><span class="ryer">...</span></p>
<div class="line"></div>
</div>
<div class="case">
<h6>...</h6>
<div сlass="smes">
</div>
<ul class="sostav">
<li сlass="case">
<div class="aqwe"><i class="fa fa-circle" aria-hidden="true"></i> txt</div>
<div class="aqwe"></div>
</li>
<li сlass="case-robusta">
<div class="robusta-n robusta-r_70"><i class="fa fa-circle" aria-hidden="true"></i> txt</div>
<div class="robusta-t">txt</div>
</li>
</ul>
<div class="line"></div>
</div>
<span class="price"><span class="woocommerce-Price-amount amount">390 <span class="woocommerce-Price-currencySymbol"></span></span>
</span>
</div>
</a><a class="button product_type_external buys" data-toggle="modal" data-target="#myModal" style="color: white;">Отправить</a></div>
</li>Answer 2
<script type="text/javascript">
$(document).ready(function() {
$(".buys").click(function(e) {
e.preventDefault();
// убираем класс active
$(".mainli.active").removeClass("active");
// добавляем класс active для блока внутри которого находится нажимаемый buys
$(this).closest(".mainli").addClass("active");
});
});
</script>
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47574 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30499 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23642 visits
- Как через css изменить цвет png изображения? 10351 visits
- Blob video url download 9962 visits
- Php curl запрос через прокси с авторизацией 9214 visits
- Работа с captcha vk api 8096 visits
![Сортировка у меня правильно сделана? [закрыт]](https://hostciti.net/images/nophoto.png "Сортировка у меня правильно сделана? [закрыт]")
© "hostciti.net" 30.11.2024 | 18:34