Добавление/удаления класса
Здравствуйте. Имеется три блока, в каждом из них есть ссылки, при нажатии на ссылку добавляется класс check, при повторном нажатии класс убирается.
В двух из трех блоков есть ссылка ALL, при нажатии на которую у всех ссылок в блоке должен убираться добавленный класс check. Как реализовать не понимаю. Пробовала искать первый элемент - не вышло. Ссылки создаются автоматически, т.е. задать определенной ссылке класс не получится в html Скрипт добавления класса к ссылкам с классом checkshadow
$('.checkshadow').click
(function() {
if($(this).is('.check'))
{
$(this).removeClass('check');
}
else
{
$(this).addClass('check');
}
})
;
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="block"><a href="#">ссылка</a></div>
<div class="block"><a href="#" class="ALL">all</a><br><a href="#">ссылка</a></div>
<div class="block"><a href="#" class="ALL">all</a><br><a href="#">ссылка</a></div>
<script>
var a = $('.block a')
a.click(function(){
if($(this).hasClass("ALL")) a.removeClass('check');
else $(this).toggleClass('check');
});
</script>
|
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
// $('.checkshadow').click(function() {
// if($(this).is('.check')) {
// $(this).removeClass('check');
// } else {
// $(this).addClass('check');
// }
// });
$(".block")
.html("<a>ALL</a>" + "<a>Link</a>".repeat(100))
.on("click", "a", function(event) {
$(this).toggleClass("check")
})
.on("click", ":contains('ALL')", function(event) {
$(this).closest(".block").find("a").removeClass("check");
});
</script><style>
body {
display: flex;
}
.block {
background: deeppink;
margin: 1em;
padding: 1em;
}
.block a {
display: inline-block;
background: white;
padding: 1em;
margin: .1em;
}
.block a.check {
background: red;
}
</style>
Простите за ужасный вид |
Цитата:
Цитата:
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="block"><a href="#">ссылка</a></div>
<div class="block"><a href="#">all</a><br><a href="#">ссылка</a></div>
<div class="block"><a href="#">all</a><br><a href="#">ссылка</a></div>
<script>
$('.block a').click(function(){
if($(this).text() == "all") $('a').removeClass('check');
else $(this).toggleClass('check');
});
</script>
|
если по куску текста, то вот такое условие
if(/all/.test($(this).text())) |
Цитата:
Только ссылки создаются не в js, а php. Вот пример одного из блоков <div class="tablinks <?=$i == 0 ? 'active' : ''?>" onclick=""> <a href = "#" class="checkshadow" onclick="return false"><?=$View->Attributes[$i]['Attribute']['AttributeAlias']?></a> </div> |
Цитата:
|
Цитата:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="block"><a href="#">ссылка</a></div>
<div class="block"><a href="#">all</a><br><a href="#">ссылка</a></div>
<div class="block"><a href="#">all</a><br><a href="#">ссылка</a></div>
<script>
$('.block a').click(function(){
if(/all/.test($(this).text())) $(this).siblings("a").removeClass('check');
else $(this).toggleClass('check');
});
</script>
переделал |
j0hnik,
в предпросмотре все замечательно, у меня же просто перестает работать эта кнопка All :-? |
| Часовой пояс GMT +3, время: 12:44. |