jquery - 获取选择状态的类名

Question

我的脚本有问题。我将尝试向您解释。当我单击一个项目时，我需要删除一个跨度的属性以替换为另一个类。

当我单击列表中的一项时：

• 我得到了主题名称（ul li span）。
• 如果类名（ default或default-act的末尾没有“-act” ，我将其添加到选定状态。
• 对于其他项目，我删除“-act”以置于未选中状态。

因此，我需要一个主题为 Name + '-act' 的iten，而其他的则没有'-act'。

这是我的代码：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);
});

注意事项：默认情况下，第一个项目有一个带有默认行为的跨度，有一个红色图标，当我点击另一个项目时，我需要删除“-act”并将其添加到选择项目上。

编辑

所以，我刚刚更新了一个更好的理解。不用担心超市和旅行图标。此外，我删除了

，很混乱。

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

Answer 1

你可以这样做：

$('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/

但就我而言，最好采用下一个方法：

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

为了让它工作，你需要改变你的 css（只显示了一些部分）：

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

和 HTML：

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

Answer 2

它可以以更简单的方式完成，所以检查小提琴：http: //jsfiddle.net/DQTKX/13/

$('ul li').on('click', function(){
    $(this).addClass('active').siblings().removeClass('active');
});

我还对您的 CSS 进行了一些更改。