Jquery 获取选择状态的类名

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

单击列表中的某个项目时：

• 我得到了主题名（ullispan）
• 如果类名（默认或默认act）末尾没有“-act”，我将添加它以放置选定状态
• 对于其他项，我删除“-act”以使其处于未选择状态

因此，我需要有一个主题名为+'-act'的iten，其他的去掉'-act'

这是我的代码：

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>

注：默认情况下，第一个项目有一个范围，默认act有一个红色图标，当我单击另一个项目时，我需要删除“-act”并将其添加到所选项目上

编辑 所以，为了更好地理解，我刚刚进行了更新。不要担心超市和旅游图标。此外，我删除了

上的课程，这很混乱

---

可以用一种更简单的方法来完成，所以请检查小提琴：

---

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

您可以这样做：

$('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"    ); 
    }

});

要使其正常工作，您需要更改css（仅显示了一些部分）：

和HTML：

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

违约
违约

看起来你让这变得更难了。只需使用一个活动类，并切换该类->？？你是说当有人用红色span单击li时，该span应该变为绿色，而之前绿色的span应该变为红色？我认为

$（this）。非（'active'）

应该是

$（this）。兄弟姐妹（':not（.active）]

@Barmar-在我看来似乎没有活动的

类要检查？@adeneo没有，因为在我的css中，我有默认的act类、食品act类，并且我不能创建一个通用的活动类。你在
themeName+'-act'
中看到一个空格了吗？@Omid这并不是我要找的全部。我想做同样的选择，但我需要h内部标签，并在主题名称中添加/删除后缀-act（=默认，食品，超市）。我试图在span中添加一个活动类，但它不能与css的其余部分一起工作。为了更好地理解，我将更新我的JSFIDLE。你的意思是你希望
li
标记中的每个
span
都有此功能吗？但是每个span中只有一个span。它工作得很好。非常感谢！我使用了第二个版本，并对css进行一些更改。；）
$('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"    ); 
    }

});

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

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

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