修改

Question

我的脚本出了问题。我将尝试解释你。当我点击一个项目时，我需要移除一个跨度的attr以替换另一个类。

当我点击列表中的某个项目时：

我得到主题名称（ul li span ）。
如果类名末尾没有'-act'（默认或 default-act ，我会将其添加到选中状态。< / LI>
对于其他项目，我删除'-act'以置于未选中状态。

因此，我需要使用主题名称 +' - act'和其他人使用'-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);
});

Nota bene：默认情况下，第一个项目有一个带有default-act的span，有一个红色图标，当我点击另一个项目时，我需要删除“-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进行了一些更改。

获取选择状态的类名

修改

2 个答案: