Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2018, 11:43
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

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

$('.checkshadow').click
  (function() {
          
      if($(this).is('.check'))
      {
          $(this).removeClass('check');
      }
      else
      {
          $(this).addClass('check');
      }
   
  })
;
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2018, 12:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2018, 12:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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


Простите за ужасный вид
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2018, 12:22
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

Сообщение от Ingred Посмотреть сообщение
Ссылки создаются автоматически, т.е. задать определенной ссылке класс не получится в html
Сообщение от j0hnik Посмотреть сообщение
<div class="block"><a href="#" class="ALL">all</a><br><a href="#">ссылка</a></div>
Спасибо за ответ. Но в том и проблема нет ссылки с классом All. ALL - это текст внутри ссылки, приведен был для уточнения - нажатие на одну определенную ссылку снимает класс у всех остальных в блоке
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2018, 12:27
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2018, 12:29
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

если по куску текста, то вот такое условие
if(/all/.test($(this).text()))
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2018, 12:30
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

Сообщение от 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:34.
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2018, 12:37
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

Сообщение от j0hnik Посмотреть сообщение
если по куску текста, то вот такое условие
if(/all/.test($(this).text()))
Заработало, только снимает классы во всех трех блоках, попробую совместить с другим ответом
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2018, 12:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от 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>


переделал
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2018, 12:59
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Каждый раз создавать объект класса GTX Общие вопросы Javascript 3 18.03.2016 21:41
Наследование класса WishMaster Общие вопросы Javascript 10 14.10.2015 21:41
Добавление класса всем родительским элементам списка Torawhite Элементы интерфейса 0 01.05.2015 22:06
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Свойства/методы класса TicTac Общие вопросы Javascript 5 03.07.2011 14:53