Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2014, 13:35
Интересующийся
Отправить личное сообщение для bigjoy Посмотреть профиль Найти все сообщения от bigjoy
 
Регистрация: 12.10.2013
Сообщений: 12

изменить цвет фона у всех элементов с одинаковым классом
Добрый день!
есть 3 абзаца
<p class='one'>text 1</p>
<p class='one'>text 2</p>
<p class='one'>text 3</p>


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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2014, 14:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Для работы в 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>
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2014, 15:02
Интересующийся
Отправить личное сообщение для bigjoy Посмотреть профиль Найти все сообщения от bigjoy
 
Регистрация: 12.10.2013
Сообщений: 12

Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 06.01.2014, 19:18
Интересующийся
Отправить личное сообщение для yndx.tavria Посмотреть профиль Найти все сообщения от yndx.tavria
 
Регистрация: 19.10.2013
Сообщений: 10

Еще как вариант, чтобы не думать о кроссбраузерности вашего кода, можно подключить библиотеку jQuery и в разы сократить код, вот пример http://jsfiddle.net/tavriaforever/u73wL/
Ответить с цитированием
  #5 (permalink)  
Старый 06.01.2014, 19:25
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

$('.one').click(function(){
   $(this).addClass('selected').siblings().removeClass('selected');
});
Ответить с цитированием
  #6 (permalink)  
Старый 06.01.2014, 19:35
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Все конечно зависит от сложности сайта. Если js-кода мало, то можно не нагружать сайт лишним хламом ввиде jQuery.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 06.01.2014, 20:10
Интересующийся
Отправить личное сообщение для yndx.tavria Посмотреть профиль Найти все сообщения от yndx.tavria
 
Регистрация: 19.10.2013
Сообщений: 10

Если загружать jQuery с CDN - есть немалый шанс, что этот код у пользователя уже есть)
Помимо этого, сложно представить современный сайт, на котором не используется jQuery || что-то подобное.
Ответить с цитированием
  #8 (permalink)  
Старый 06.01.2014, 21:05
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от 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
Ответить с цитированием
  #9 (permalink)  
Старый 07.01.2014, 06:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #10 (permalink)  
Старый 07.01.2014, 11:18
Интересующийся
Отправить личное сообщение для yndx.tavria Посмотреть профиль Найти все сообщения от yndx.tavria
 
Регистрация: 19.10.2013
Сообщений: 10

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить размер всех элементов страницы пропорционально размеру окна nefton Events/DOM/Window 3 03.01.2014 10:22
выборка элементов таблицы и цвет фона xber9 jQuery 10 07.08.2013 20:30
Как изменить свойство css у всех элементов одного класса AlexJ Events/DOM/Window 7 19.03.2011 06:25
Как изменить background всех дочерних элементов внутри <div>? libinstyle Общие вопросы Javascript 2 24.03.2010 13:25
изменить цвет фона и запомнить его delias Элементы интерфейса 4 19.03.2010 17:34