VPF::Добавить/удалить class в список - Форум программистов

Castro

Дата 4.2.2008, 09:57 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

Есть следующий блочный елемент

Код


<div id="elemId" class="myClass1">...</div>

1. Как можно добавить ещё один класс, пробразовав блок к виду

Код


<div id="elemId" class="myClass1 myClass2">...</div>

?
2. Как удалить из блока нужный мне класс преобразовав

Код


<div id="elemId" class="myClass1 myClass2">...</div>

Код


<div id="elemId" class="myClass1">...</div>

--------------------

ksnk

Дата 4.2.2008, 10:25 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Код


function CLS(cl){
    var reg; (reg=new RegExp("(^|\\b)"+cl+"(\\b|$)")).compile;
    return {
        add:function(x){
            var r=this.have(x);
            if (r==false)
                x.className=cl
            else if(!r)
                x.className+=(x.className&&' '||'')+cl;
        },
        have:function(x){
            if (typeof x.className =="string")
                return (x.className.match(reg))
            else    
                return false;    
        },
        remove:function(x){
            if (typeof x.className =="string") {
                if (x.className.match(reg))
                    x.className=x.className.replace(reg,'')
            }
        }
    }
}

var class2=CLS('myClass2')

когда нужно

поставить - class2.add(document.getElementById('id'));
убрать - class2.remove(document.getElementById('id'));
проверить - class2.have(document.getElementById('id'));

по сравнению с практикой, принятой в фреймворках, эта несколько перевернута с ног на голову или головы на ноги, с какой стороны посмотреть. Так как обычно есть ограниченное ( я больше 3-х не встречал smile

) количество имен классов, с которыми нужно работать, такое представляется более эффективным.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Dr.Zlo

Дата 4.2.2008, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 12.11.2007

Репутация: 1
Всего: 2

ksnk, очередной респект тебе за оригинальное решение, если бы я уже имел право ставить плюсики, я бы тебе поставил не задумываясь. Только я не понимаю, зачем так мучаться с классами? Лично я когда не пользовался библиотеками решал вопрос так:

Код


var x = document.getElementById('test_div').className;

//заменить class1 на class2
document.getElementById('test_div').className = x.split('class1')[0]+' class2 '+x.split('class1')[1];

// добавить класс class2
document.getElementById('test_div').className = x+' class2 ';

// удалить класс class1
document.getElementById('test_div').className = x.split('class1')[0]+x.split('class1')[1];

А когда начал пользоваться jQuery, просто стал юзать его стандартные addClass, removeClass и hasClass, но когда тёмными зимними ночами меня одолевает ностальгия по старым временам, я пишу так:

$('#test_div').attr('class', $('#test_div').attr('class') + ' class2 ')

ksnk

Дата 4.2.2008, 11:26 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Dr.Zlo, Когда темными зимними ночами вам попадется элемент, у которого не установлен класс вообще, конструкция "удалить класс class1" и "заменить класс" выдаст ошибку, а уж когда кому-то повезет дважды вызвать "поставить класс", начнется просто какая-то попадья ;-) Впрочем, забавно, надо будет запомнить метод работы с такими строками ;-)

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Castro

Дата 4.2.2008, 11:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: нет
Всего: 5

ksnk, благодарю smile

--------------------

Dr.Zlo

Дата 4.2.2008, 13:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 12.11.2007

Репутация: 1
Всего: 2

Цитата

Когда темными зимними ночами вам попадется элемент, у которого не установлен класс вообще, конструкция "удалить класс class1" и "заменить класс" выдаст ошибку

Конструкция выдаст не ошибку, а поставит у элемента класс 'undefined'.
Но я из-за этого никогда не парился, потому как когда я изменяю класс у элемента, я знаю какой у него класс до манипуляций, но раз уж пошла такая пьянка, то вот:

Код


//заменить class1 на class2
document.getElementById('test_div').className = x.split('class1')[0]+' class2 '+(x.split('class1')[1] || '');

// добавить класс class2
document.getElementById('test_div').className =(x.split('class2').length==1)? x+' class2': x;

// удалить класс class1
document.getElementById('test_div').className = x.split('class1')[0]+(x.split('class1')[1] || '');

Я здесь использую x вместо document.getElementById('test_div').className просто для экономии места smile

Кстати вот ещё определение присутствия класса:

Код


if (document.getElementById('test_div').className.split('class1').length>1){
....
}

Хотя в любом случае с помощью smile

jQuery

компактней получается

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »