Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2017, 22:48
Профессор
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 202

удалить разные классы у списка элементов по клику и вернуть потом их состояние
есть список
<path class="red o1">
<path class="green o1">
<path class="orange o2">
<path class="red o1">
<path class="orange o1">
.........
<path class="green o2">



есть две ссылки

<a id="link-o1" href="#">1 очередь</a> / <a id="link-o2" href="#">2 очередь</a>



как мне при клики на a#link-o1 очистить все path с class (o2) т.е удалить класс цвета. а o2 оставить.

а при повторном клике a#link-o1 вернуть все как было? т.е запомнить состояние class
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2017, 01:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

ufaclub,
и быстрее и проще ничего не удалять в path, а менять класс только у их родителя и css!!!
но зачем проще ...
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("[id^='link']").each(function(e, a) {
        var b = a.id.split("-")[1],
            d = $("path." + b).each(function(a, c) {
                $(c).data("cl", c.className.split(b).join(""))
            });
        $(a).on("click", function(a) {
            a.preventDefault();
            d.each(function(a, b) {
                var c = $(b).data("cl");
                $(b).toggleClass(c)
            })
        })
    })
});
  </script>
</head>

<body>
<path class="red o1"></path>
<path class="green o1"></path>
<path class="orange o2"></path>
<path class="red o1"></path>
<path class="orange o1"></path>
.........
<path class="green o2"></path>
<a id="link-o1" href="#">1 очередь</a> / <a id="link-o2" href="#">2 очередь</a>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как удалить элемент из списка элементов? _SR_71_ Events/DOM/Window 1 04.06.2013 18:35
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 15:36