удалить разные классы у списка элементов по клику и вернуть потом их состояние
есть список
<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 |
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>
|
| Часовой пояс GMT +3, время: 01:03. |