Существует ли className в Mootools?

Я хочу обновить этот очень простой JS до Mootools 1.2, и это непросто. Эта функция:

function changeclass(x){

                document.getElementById("content").className = "ziclass0";
                document.getElementById("content").className = "ziclass" + x; 

            }

запускается в DOM:

<div id="someclass">
        a href="javascript: changeclass(0)">Unstyled</a
        a href="javascript: changeclass(1)">link one</a
        a href="javascript: changeclass(2)">link two</a
        a href="javascript: changeclass(3)">link three</a
</div>

для вызова соответствующих классов CSS, например:

.ziclass1 h1{
            color: rgb(142,11,0);
            font-family: Verdana;
            font-size: 2.5em;
            letter-spacing: 0.1em;

        }

и соответствующим образом изменяет макет в:

<div id="content" class="ziclass3"> ...  </div>

Я знаю, что могу добавить событие к триггерам, например:

        $(#someclass.each(function(element,index) {
        element.addEvent('click', function(){
        //some code
        });

Но как мне получить имя класса класса #content?

Через массив?

Я немного смущен здесь.

Я был бы очень признателен за любую помощь, чтобы поставить меня на правильный путь


javascript mootools
person anna mae    schedule 04.06.2010    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Это очень основы MooTools. Во всяком случае, вот как вы можете изменить имя класса набора элементов:

$$('#container a').each(function(link){
    link.addEvents({
        click: function(e){
            e.stop();

            this.set('class', 'newClassName');

            // to append a class
            // this.addClass('appendThisClass');
        }
    });
});

Вот рабочий пример: http://jsfiddle.net/oskar/9fxxr/

Все это есть в документации: http://mootools.net/docs/core/Element/Element< /а>

person Oskar Krawczyk    schedule 04.06.2010
comment
Эй, так просто. Большое спасибо. - person anna mae; 05.06.2010

arrow_upward
0
arrow_downward

Но это не совсем то, о чем я спрашивал. Триггерный элемент (a) вызывает элемент css, перебирая его номер, расположенный в «href». БЫВШИЙ :

a href="javascript: changeclass(1)">Link One</a

// вызывает все классы CSS с именем .ziclass1 и применяет/добавляет их в «контент»

a href="javascript: changeclass(2)">Link Two</a

// вызывает все классы CSS с именем .ziclass2 и применяет/добавляет их в «контент»

С ИСПОЛЬЗОВАНИЕМ

function changeclass(x){
document.getElementById("content").className = "ziclass" + x; 
}

РЕЗУЛЬТАТ: HTML:

a href="javascript: changeclass(1)">Link One</a
 a href="javascript: changeclass(2)">Link Two</a

<div id="content" class="ziclass1">
...
</div>

Вот почему я думал о массиве.

Вокруг этой идеи:

    var myArray = ["0","1","2", etc ...];
    function myFunction() {
    myArray.each(function(value, index, array){
    $(value).addEvent('click',function(event) {                       
    console.log(value); 
// add my class here
     });
    });
    };
    myFunction();

где я бы получил значение массива, расположенного в href следующим образом:

    a href="1">Link one</a
a href="2">Link two</a

и изменить класс соответственно. Но я не знаю, как это сделать.

person anna mae    schedule 05.06.2010
comment
Благодаря треду об областях видимости переменных я наконец перенес этот простой JS-скрипт на Mootools 1.2. Пример на JSFiddle: jsfiddle.net/vgjTh Работая над ним, я разработал пример прокрутки: jsfiddle.net/U6v37 Пример CSS взят из статьи Matt Ward: Create Beautiful CSS3 Typography :: Блог Echo Enduring blog.echoenduring.com/2010/05/ 13/ - person anna mae; 20.06.2010