根据类名值更改类名答案

【问题标题】：Change class name all depending on class name value根据类名值更改类名
【发布时间】：2013-08-02 14:35:33
【问题描述】：

我目前有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 被点击时，它应该改变所有 screenPower 元素的类还是只改变作为该 screenItem 子元素的 screenPower 元素？
想象一下有两个屏幕。一个是“开”，一个是“关”——当点击那个“关”时，它应该被“开”，当前“开”的屏幕变成“关”——希望它有意义:)跨度>
所以一次只能打开一个屏幕 - 我只是编辑我的帖子以使其更清晰。谢谢你的提问:)
他们俩都不会下课吗？或者它总是一个关闭，一个打开
"或者总是一个关闭，一个打开"

标签： jquery css class

【解决方案1】：

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

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

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

Working Demo

【讨论】：

然后你可以使用 .hasClass() 过滤逻辑
这只会在被点击的项目中找到screenOn，而不是在其他screenItem块中。我认为这不是理想的行为（或者我可能误解了这个问题）
这是个好问题；在重新阅读这篇文章时，我无法准确说出 OP 想要什么。
@PeterVR 我向 OP 澄清并相应地更新了我的答案。谢谢！

【解决方案2】：

$(".screenItem").click(function() {
   var wasOn = $(this).hasClass('screenOff');
   $(this).removeClass('screenOff screenOn');
   $(this).addClass(wasOn ? 'screenOff' : 'screenOn');

   var clickedbutton = this;
}

【讨论】：

【解决方案3】：

把它放在你的点击处理程序中：

// remove the previous screen On
$('.screenPower .screenOn').removeClass('screenOn').addClass('screenOff');
// make the clicked one active
$(this).find('.screenPower').removeClass('screenOff').addClass('screenOn');

【讨论】：