изменить цвет фона у всех элементов с одинаковым классом
Добрый день!
есть 3 абзаца <p class='one'>text 1</p> <p class='one'>text 2</p> <p class='one'>text 3</p> необходимо при клике на абзаце изменить его цвет, но если нажать на другой абзац, предыдущий выделенный абзац должен вернутся в перво исходное состояние) Спасибо! |
Для работы в IE8 (и в некоторых других старых браузерах) нужно подключить костыль classList.js
<!DOCTYPE html>
<style>
.selected{outline: 1px solid blue}
</style>
<p class='one'>text 1</p>
<p class='one'>text 2</p>
<p class='one'>text 3</p>
<script>
(function(){
var items = document.querySelectorAll('.one');
var selected = null;
var onclick = function() {
if (selected)
selected.classList.remove('selected');
this.classList.add('selected');
selected = this;
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = onclick;
}
})();
</script>
|
Спасибо
|
Еще как вариант, чтобы не думать о кроссбраузерности вашего кода, можно подключить библиотеку jQuery и в разы сократить код, вот пример http://jsfiddle.net/tavriaforever/u73wL/
|
$('.one').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
|
Цитата:
Все конечно зависит от сложности сайта. Если js-кода мало, то можно не нагружать сайт лишним хламом ввиде jQuery. |
Если загружать jQuery с CDN - есть немалый шанс, что этот код у пользователя уже есть)
Помимо этого, сложно представить современный сайт, на котором не используется jQuery || что-то подобное. |
Цитата:
Цитата:
Compiled Size: 151 bytes gzipped (166 bytes uncompressed) Saved 15.64% off the gzipped size (31.40% without gzip) The code may also be accessed at default.js.
(function(){for(var a=null,b=document.querySelectorAll(".one"),c=b.length;c--;)b[c].onclick=function(){a&&(a.className="one");this.className+=" selected";a=this}})();
За 151 байт Jquery тянуть с CDN |
Цитата:
В последнем проекте делал так: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="polyfills/ie8.js"></script> <![endif]--> В ie8.js собрал костыли для nextElementSibling, textContent, addEventListener. Условные костыли для classList и [placeholder]
(function(){
function loadScript(src) { document.write('<script src="' + src + '"><\/script>') }
("classList" in document.documentElement) || loadScript('polyfills/classlist.js');
("placeholder" in document.createElement('textarea')) || loadScript('polyfills/placeholders.min.js');
})();
Подключаются только в старых браузерах. Ща вот еще пытаюсь найти костыль для FormData для удобной сериализации форм для отправки через XMLHttpRequest. |
1) Если CDN будет недоступен, то это из разряда в "городе выключили свет", возможно, но супер редко. И Всегда можно фолбек оставить на такой случай.
2) Даник, если тебе кайфовей писать native js - это не плохо, вопрос лишь в полной кроссбраузерности твоих решений, скорости разработки(тот же jQuery экономит много часов сна), ну и не стоит забывать о дальнейшей поддержке, меньше кода = легче поддерживать. Это личное мое ИМХО. |
| Часовой пояс GMT +3, время: 06:11. |