Question

I have got a problem with my script. I will try to explain you.When I click on an item, I need to remove a attr of a span to replace with an another class.

When I click on a item of the list :

• I get the theme Name (ul li span).
• If there isn’t ‘-act’ at the end of the class name (default or default-act, I add it to put the selected state.
• For the others items, I remove ‘-act’ to put the unselected state.

In consequence, I need to have an iten with the theme Name + ‘-act’ and the others whitout ‘-act’.

Here is my code : http://jsfiddle.net/DQTKX/21/

HTML

<section id="createform">
    <ul>
      <li id="theme_1">
        <span class="default-act">Default</span>
        <h3>Default</h3>
      </li>
      <li id="theme_2">
        <span class="food">Food</span>
        <h3>Food</h3>
      </li>
      <li id="theme_3">
        <span class="supermarket">Supermarket</span>
        <h3>Supermarket</h3>
      </li>
      <li id="theme_4">
        <span class="travel">Travel</span>
        <h3>Travel</h3>
      </li>
    </ul>
</section>

jQuery

$('ul li').on('click', function(){
    var themeName = $(this).find('span').attr('class');  

    $(this)
        .removeClass(themeName)
        .addClass(themeName + '-act');

    $(this).not('active')
        .removeClass(themeName + '-act')
        .addClass(themeName);
});

Nota bene : By default, the first item have a span with a default-act to have an red icon, and when I clicked on another item, I need to remove the “-act” and add it on the select item.

EDIT

So, I’ve just updated for a better comprehension. Don’t worry about supermarket and travel icons. Besides, I removed the class on the

, it was confusion.

http://jsfiddle.net/DQTKX/21/

Answer 1

You can do it like this:

$('ul li').on('click', function(){
    var className = $("span", this).attr("class");
    if(className.indexOf("-act")<=0){       
        $("#createform ul li span[class*='-act']").each(function(){this.className = this.className.replace("-act", "");})
        $("span", this).attr("class", className + "-act"    ); 
    }

});

http://jsfiddle.net/DQTKX/22/

But as for me, it is better to do it next way:

$('ul li').on('click', function(){
    if(!$("span", this).hasClass("act")){
    $("#createform ul li span.act").removeClass("act");
        !$("span", this).addClass("act")
    }
});

To make it work, you need to change your css (just some parts are shown):

#createform li .default {
    margin: 35px auto;
    width: 69px;
    height: 114px;
    background-position: 0 0;
}
#createform li .default.act {
    background-position: 0 -114px;
}

And HTML:

<li id="theme_1">
        <span class="default act">Default</span>
        <h3>Default</h3>
      </li>