Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2013, 04:20
Интересующийся
Отправить личное сообщение для Tylmaril Посмотреть профиль Найти все сообщения от Tylmaril
 
Регистрация: 21.07.2013
Сообщений: 10

Проблемы с className
Доброго времени суток.
Имеется 4 блока div c разными id и разными class.
Задача:поменять у одного из блоков div один класс на другой.
Логику как это сделать я вроде понял,но вот как это выразить в коде непонимаю.
Гугление особых результатов не принесло,поэтому если можно поясните мне на примере,приведенном ниже, как в коде обратиться к определенному div по его классу(как записать,что хочу к div class=olo1 добавить class=olo4,а следом удалить из него class=olo1)(место выделено как комментарий).


<!DOCTYPE html>
<html>
	<head>
		<title>Заголовок страницы</title>
		<meta charset="utf-8">
		<style>
                #did1
                #did2
		#did3
                #did4
		#olo{color:white;}
		.olo1 {background:red; width: 100px; height: 100px;}
		.olo2 {background:green; width: 100px; height: 100px;}
		.olo3 {background:blue; width: 100px; height: 100px;}
		.olo4 {background:pink; width: 100px; height: 100px;}
		</style>
		<script>
		window.onload = function ()
{		                              
document.getElementById('did1').//className(' olo1 ') = '  olo4  '
document.getElementById('did1').//className(' olo1 ').replace = '  olo1  '
}
		</script>
	</head>
	<body>
	<center>
		<div id=did1 class=' olo1 '>one</div>
		<div id=did2 class=' olo2 '>two</div>
		<div id=did3 class=' olo3 '>three</div>
		<div id=did4 class=' olo4 '>four</div>
	</center>
	</body>
</html>

Последний раз редактировалось Tylmaril, 22.07.2013 в 13:08.
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2013, 05:55
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Tylmaril
Имеется 4 блока div с один и тем же id
И это уже неправильно. Исправь для начала этот косяк.
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2013, 12:46
Интересующийся
Отправить личное сообщение для Tylmaril Посмотреть профиль Найти все сообщения от Tylmaril
 
Регистрация: 21.07.2013
Сообщений: 10

Исправил,но вопрос остался тот же.
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2013, 13:16
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Цитата:
как в коде обратиться к определенному div по его классу(как записать,что хочу к div class=olo1 добавить class=olo4,а следом удалить из него class=olo1
$('.olo1').addClass('olo4').removeClass('olo1')

неужели прочитать любой один мануал по jquery это так сложно?
Ответить с цитированием
  #5 (permalink)  
Старый 22.07.2013, 13:43
Интересующийся
Отправить личное сообщение для Tylmaril Посмотреть профиль Найти все сообщения от Tylmaril
 
Регистрация: 21.07.2013
Сообщений: 10

А без jquery это сделать можно?Прочитать не сложно,но мне тут надо обойтись пока без него.
Ответить с цитированием
  #6 (permalink)  
Старый 22.07.2013, 13:43
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

mta88, а кто Вам сказал, что автор использует jQuery?
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2013, 14:08
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Цитата:
А без jquery это сделать можно?
ну начинается

в самой jquery методы 'addClass' и 'removeClass' реализованы через манипуляцию 'className' с помощью методов строк 'replace' и 'indexOf'
посмотрите сами, там больше 3 строчек
https://github.com/jquery/jquery/blo...ributes.js#L27

------------------------------------
P.S.
да и вы сами пытались replace использовать вроде, но не получилось
изучите нормально javascript и все получится
не мне же вас ветвлениям и работе со строками учить

Последний раз редактировалось mta88, 22.07.2013 в 14:12.
Ответить с цитированием
  #8 (permalink)  
Старый 22.07.2013, 14:09
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

HTMLElement.prototype.addClass = function(a)
{
	this.className += ' '+a;
}
HTMLElement.prototype.removeClass = function(a)
{
	var b = new RegExp(' ?'+a);
	this.className = this.className.replace(b, '');
}


document.getElementById('did1').addClass('test');
document.getElementById('did2').removeClass('test');
Ответить с цитированием
  #9 (permalink)  
Старый 22.07.2013, 14:20
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

document.getElementById('did1').classList.add('test');
document.getElementById('did1').classList.remove('test');


Для IE 8 подключаем костыль.
Ответить с цитированием
  #10 (permalink)  
Старый 22.07.2013, 17:31
Интересующийся
Отправить личное сообщение для Tylmaril Посмотреть профиль Найти все сообщения от Tylmaril
 
Регистрация: 21.07.2013
Сообщений: 10

Появился новый вопрос, есть ли возможность удалить вообще ВСЕ классы,не перечисляя их.
Имею ввиду что то на подобии этого:

document.getElementById('did1').classList.remove('*');

Последний раз редактировалось Tylmaril, 23.07.2013 в 15:06.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблемы с PagingToolbar serg3091 ExtJS 4 26.06.2013 09:33
Проблемы при установке модулей node.js tadjik1 AJAX и COMET 1 18.03.2012 02:20
Глюки при установке className в ИЕ6 kostyl Events/DOM/Window 14 07.12.2009 00:43
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Drug&Drop + всплывание события = проблемы =(( _NoName_ Events/DOM/Window 4 05.03.2009 17:47