Форум

bigjoy · #1 (**permalink**) 05.01.2014, 13:35

Добрый день!
есть 3 абзаца

<p class='one'>text 1</p>
<p class='one'>text 2</p>
<p class='one'>text 3</p>

необходимо при клике на абзаце изменить его цвет, но если нажать на другой абзац, предыдущий выделенный абзац должен вернутся в перво исходное состояние)

Спасибо!

danik.js · #2 (**permalink**) 05.01.2014, 14:54

Для работы в 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>

bigjoy · #3 (**permalink**) 05.01.2014, 15:02

Спасибо

yndx.tavria · #4 (**permalink**) 06.01.2014, 19:18

Еще как вариант, чтобы не думать о кроссбраузерности вашего кода, можно подключить библиотеку jQuery и в разы сократить код, вот пример http://jsfiddle.net/tavriaforever/u73wL/

Vlasenko Fedor · #5 (**permalink**) 06.01.2014, 19:25

$('.one').click(function(){
   $(this).addClass('selected').siblings().removeClass('selected');
});

danik.js · #6 (**permalink**) 06.01.2014, 19:35

Сообщение от yndx.tavria

в разы сократить код

Ну вобще-то так не сократишь, а увеличишь примерно на 10 000 строк кода (примерный размер jQuery)

Все конечно зависит от сложности сайта. Если js-кода мало, то можно не нагружать сайт лишним хламом ввиде jQuery.

yndx.tavria · #7 (**permalink**) 06.01.2014, 20:10

Если загружать jQuery с CDN - есть немалый шанс, что этот код у пользователя уже есть)
Помимо этого, сложно представить современный сайт, на котором не используется jQuery || что-то подобное.

Vlasenko Fedor · #8 (**permalink**) 06.01.2014, 21:05

Сообщение от yndx.tavria

Если загружать jQuery с CDN - есть немалый шанс

что он будет недоступен

Сообщение от yndx.tavria

что-то подобное

Original Size: 179 bytes gzipped (242 bytes uncompressed)
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

danik.js · #9 (**permalink**) 07.01.2014, 06:33

Сообщение от yndx.tavria

Помимо этого, сложно представить современный сайт, на котором не используется jQuery

Те же landing pages. Они должны грузиться быстро. А функционала в них мало. Меня просто коробит от предложения цеплять jQuery к ним.

В последнем проекте делал так:

<!--[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.

yndx.tavria · #10 (**permalink**) 07.01.2014, 11:18

1) Если CDN будет недоступен, то это из разряда в "городе выключили свет", возможно, но супер редко. И Всегда можно фолбек оставить на такой случай.
2) Даник, если тебе кайфовей писать native js - это не плохо, вопрос лишь в полной кроссбраузерности твоих решений, скорости разработки(тот же jQuery экономит много часов сна), ну и не стоит забывать о дальнейшей поддержке, меньше кода = легче поддерживать. Это личное мое ИМХО.

Форум

Справочник

Discord чат

Курсы javascript