Javascript-форум - Добавление/удаления класса

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Добавление/удаления класса (https://javascript.ru/forum/dom-window/74379-dobavlenie-udaleniya-klassa.html)

Ingred

05.07.2018 11:43

Добавление/удаления класса

Здравствуйте. Имеется три блока, в каждом из них есть ссылки, при нажатии на ссылку добавляется класс check, при повторном нажатии класс убирается.
В двух из трех блоков есть ссылка ALL, при нажатии на которую у всех ссылок в блоке должен убираться добавленный класс check. Как реализовать не понимаю.
Пробовала искать первый элемент - не вышло. Ссылки создаются автоматически, т.е. задать определенной ссылке класс не получится в html
Скрипт добавления класса к ссылкам с классом checkshadow

$('.checkshadow').click
  (function() {
          
      if($(this).is('.check'))
      {
          $(this).removeClass('check');
      }
      else
      {
          $(this).addClass('check');
      }
   
  })
;

j0hnik

05.07.2018 12:03

<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>

Malleys

05.07.2018 12:17

<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>

Простите за ужасный вид

Ingred

05.07.2018 12:22

Цитата:

Сообщение от Ingred (Сообщение 489058)

Ссылки создаются автоматически, т.е. задать определенной ссылке класс не получится в html

Цитата:

Сообщение от j0hnik (Сообщение 489060)

<div class="block"><a href="#" class="ALL">all</a><br><a href="#">ссылка</a></div>

Спасибо за ответ. Но в том и проблема нет ссылки с классом All. ALL - это текст внутри ссылки, приведен был для уточнения - нажатие на одну определенную ссылку снимает класс у всех остальных в блоке

j0hnik

05.07.2018 12:27

<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>

j0hnik

05.07.2018 12:29

если по куску текста, то вот такое условие

if(/all/.test($(this).text()))

Ingred

05.07.2018 12:30

Цитата:

Сообщение от Malleys

Malleys

, спасибо за ответ.
Только ссылки создаются не в js, а php. Вот пример одного из блоков

<div class="tablinks <?=$i == 0 ? 'active' : ''?>" onclick="">
			     <a href = "#" class="checkshadow" onclick="return false"><?=$View->Attributes[$i]['Attribute']['AttributeAlias']?></a>
		    </div>

Ingred

05.07.2018 12:37

Цитата:

Сообщение от j0hnik (Сообщение 489065)

если по куску текста, то вот такое условие

if(/all/.test($(this).text()))

Заработало, только снимает классы во всех трех блоках, попробую совместить с другим ответом

j0hnik

05.07.2018 12:43

Цитата:

Сообщение от Ingred

Заработало, только снимает классы во всех трех блоках, попробую совместить с другим ответом

думал так и надо

<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>

переделал

Ingred

05.07.2018 12:59

j0hnik,
в предпросмотре все замечательно, у меня же просто перестает работать эта кнопка All :-?

Malleys

05.07.2018 13:02

Может вместо /all/.test надо /all/gim.test
типо регистронезависимое

j0hnik

05.07.2018 13:04

Malleys,
зачем для тест флаг 'g' ?

Ingred

05.07.2018 13:20

Сделала так :-? Работает...

$('.checkshadow1').click(function(){
		if($(this).text() == "Все") $('.checkshadow1').removeClass('check');
		else	$(this).toggleClass('check');
	});
  
  $('.checkshadow2').click(function(){
		if($(this).text() == "Все") $('.checkshadow2').removeClass('check');
		else	$(this).toggleClass('check');
	});
  
$('.checkshadow3').click(function() {
        
    if($(this).is('.check'))
    {
        $(this).removeClass('check');
    }
    else
    {
        $(this).addClass('check');
    }
 
});

Malleys

05.07.2018 13:27

Цитата:

Сообщение от j0hnik

зачем для тест флаг 'g' ?

первое искать или всё искать

var str = ".a.a", r1 = /a/, r2 = /a/g;
alert([r1.test(str), r1.test(str), r1.test(str)]);
alert([r2.test(str), r2.test(str), r2.test(str)]);

j0hnik

05.07.2018 13:42

Malleys,
Мысль понял, но в данном случае не нужен.

Dilettante_Pro

05.07.2018 13:49

Ingred,

Цитата:

Сообщение от Ingred

Работает...

Странно...
Покажите ваш html, пожалуйста.

Dilettante_Pro

05.07.2018 16:18

Собрал все советы + немного своего

<style>
.check { color:green;}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="block1 fltr">
   <a class="checkshadow1" href="#">ссылка</a>
</div>
<div class="block2 fltr">
   <a class="checkshadow2" href="#">All</a><br>
   <a class="checkshadow2" href="#">ссылка</a><br>
   <a class="checkshadow2" href="#">ссылка</a></div>
<div class="block3 fltr">
   <li class = "mr-3"><a class="checkshadow3" href="#">all</a></li>
   <li class="tablinks all"><a class="checkshadow3" href="#">ссылка</a></li>
</div>
<div class="block4 fltr">
   <a class="checkshadow4" href="#">Все</a><br>
   <a class="checkshadow4" href="#">ссылка</a>
</div>
	<script>
	$("a[class*=checkshadow]").click(function(){
		if(/all|все/i.test($(this).text())) $(this).parents('.fltr').find("a[class*=checkshadow]").removeClass('check');
		else	$(this).toggleClass('check');
	});
	</script>

Часовой пояс GMT +3, время: 09:34.