jquery - 全部更改类名称，具体取决于类名称值

我目前有class ="screenPower"驻留在class="screenItem"中。

在screenItem上，我有一个点击事件：

$(".screenItem").click(function() {
    var clickedbutton = this;
}

我的问题是：单击时如何将screenPower screenOff更改为screenPower screenOn？当单击screenOff时，应关闭当前活动的screenOn。 -换句话说，一次只能在一个屏幕上显示screenOn。

我本质上想做的是这样的：

if(clicked && == "screenPower screenOff) {
//change target class to screenPower screenOn
//change current active class to screenPower screenOff
}

的HTML

<div class="screenItem">
    <div class="screenImage1">  <span></span>

        <img src="images/img.gif" class="img-rounded img-responsive" alt="KSRasmussen" />
    </div>
    <div class="screenPower screenOn"></div>
</div>
<div class="screenItem">
    <div class="screenImage1">  <span></span>

        <img src="images/img.gif" class="img-rounded img-responsive" alt="KSRasmussen" />
    </div>
    <div class="screenPower screenOff"></div>
</div>

最佳答案

单击screenItem时，检查它是否具有任何.screenOff后代。如果是这样，则可以找到所有screenPower元素，并使用toggleClass函数添加和删除screenOff和screenOn类：

$(".screenItem").click(function() {
    if($(this).find('.screenOff').length > 0) {
        $('.screenPower').toggleClass('screenOff screenOn');
    }
});

假定screenPower以screenOff或screenOn开头，在您的示例中似乎是这种情况。

Working Demo

关于jquery - 全部更改类名称，具体取决于类名称值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18019589/