Does className exist in Mootools ?

Question

Hi, I want to update this very simple JS to Mootools 1.2 and it's not easy. This function :

function changeclass(x){

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

            }

is triggered in the DOM by :

<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>

to call the according CSS classes like :

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

        }

and changes the layout accordingly in :

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

I know I can add an event to the triggers like :

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

But, how do I get #content class classname ?

Through an array ?

I am a bit confused here.

I'd be really grateful for any help to set me on the right track

Answer 1

These are very basics of MooTools. Anyway, here's how you change a class name of a collection of elements:

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

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

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

Here's a working example: http://jsfiddle.net/oskar/9fxxr/

It's all in the documentation: http://mootools.net/docs/core/Element/Element

Answer 2

But this is not exactly what i was asking. The triggering element (a) calls a css element by looping through its number located in "href". EX :

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

// calls all CSS classes named .ziclass1 and applies/adds them in "content"

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

// calls all CSS classes named .ziclass2 and applies/adds them in "content"

USING

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

RESULT : HTML:

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

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

That's why I was thinking about an array.

Around this idea :

    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();

where I'd get the value of the array located in the href like this :

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

and change the class accordingly. But I dont know how to do this.