Смена атрибутов
154
11 февраля 2019, 06:00
Есть какие-то блоки и какие-то атрибуты, допустим вот так:
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
...
Нужно при нажатии кнопки, заменить у всех блоков содержимое class на data-newclass, а после повторного нажатия вернуть как было.
Идея есть, но мне кажется что она слишком глупая.
$('input').on('click', function() {
$('.list div').each(function(){
var attr1 = $(this).attr('class'),
attr2 = $(this).data('newclass');
$(this).attr('class',attr2);
$(this).data('newclass',attr1);
});
});.list div {
width: 100px;
height: 30px;
margin-bottom: 10px;
}
.one {
background: #111;
}
.red {
background: red;
}
.one-new {
background: #111;
}
.one-new::after {
content: '1';
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
}
.blue-green {
background: blue;
box-shadow: 0 0 0 1px green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="list">
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
</div>
<input type="button" value="click" />Answer 1
Для этого в jQuery есть метод toggleClass()
UPD: Прошу прощения, не сразу понял суть вопроса. Тогда либо так, как вы написали, либо можно сделать самому обработчик, например:
$( document ).ready(function(){
$.fn.toggleDataClass = function(dataAttr) {
var newClass = $(this).attr(dataAttr);
if ( $(this).hasClass( newClass ) ) {
$(this).removeClass( newClass );
} else {
$(this).addClass( newClass );
}
return this;
};
$('input').on('click', function() {
$(".one").toggleDataClass("data-newclass");
$(".red").toggleDataClass("data-newclass");
});
});.list div {
width: 100px;
height: 30px;
margin-bottom: 10px;
}
.one {
background: #111;
}
.red {
background: red;
}
.one-new {
background: #111;
}
.one-new::after {
content: '1';
display: block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
}
.blue-green {
background: blue;
box-shadow: 0 0 0 1px green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
<div class="one" data-newclass="one-new"></div>
<div class="red" data-newclass="blue-green"></div>
</div>
<input type="button" value="click" />
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46677 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30287 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22840 visits
- Как через css изменить цвет png изображения? 10163 visits
- Blob video url download 9800 visits
- Php curl запрос через прокси с авторизацией 9059 visits
- Работа с captcha vk api 7977 visits
© "hostciti.net" 26.4.2024 | 14:07