Jquery 根据类名值更改所有类名_Jquery_Css_Class

Jquery 根据类名值更改所有类名

jquery css class

Jquery 根据类名值更改所有类名,jquery,css,class,Jquery,Css,Class,我目前拥有class=“screenPower”，它位于class=“screenproject”内部在screenItem上，我有一个点击事件： $(".screenItem").click(function() { var clickedbutton = this; } 我的问题是：单击时如何将screenPower screenOff更改为screenPower screenOn？当点击screenOff时，当前活动的screenOn应关闭。-换句话说，一次只能有一个屏幕有sc

我目前拥有

class=“screenPower”

，它位于

class=“screenproject”

内部

在

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>

单击

屏幕项目时，检查它是否有.screenOff
子项。如果是，则可以找到所有screenPower
元素，并使用toggleClass
功能添加和删除screenpowf
和screenpon
类：
$(".screenItem").click(function() {
    if($(this).find('.screenOff').length > 0) {
        $('.screenPower').toggleClass('screenOff screenOn');
    }
});

这假设screenPower
以screenOff
或screenOn
开始，从您的示例来看，情况就是这样
单击屏幕项目
时，检查它是否有.screenOff
子项。如果是，则可以找到所有screenPower
元素，并使用toggleClass
功能添加和删除screenpowf
和screenpon
类：
$(".screenItem").click(function() {
    if($(this).find('.screenOff').length > 0) {
        $('.screenPower').toggleClass('screenOff screenOn');
    }
});

这假设screenPower
以screenOff
或screenOn
开始，从您的示例来看，情况就是这样
将其放入单击处理程序中：
// remove the previous screen On
$('.screenPower .screenOn').removeClass('screenOn').addClass('screenOff');
// make the clicked one active
$(this).find('.screenPower').removeClass('screenOff').addClass('screenOn');

将其放入单击处理程序中：
// remove the previous screen On
$('.screenPower .screenOn').removeClass('screenOn').addClass('screenOff');
// make the clicked one active
$(this).find('.screenPower').removeClass('screenOff').addClass('screenOn');

然后，您可以使用.hasClass（）筛选逻辑。这将只在单击的项中找到屏幕，而不在其他屏幕项中找到。我认为这不是我想要的行为（或者我可能误解了这个问题），这是个好问题；在重读这篇文章时，我不能确切地说出OP想要什么。@Peterver我向OP澄清了问题，并相应地更新了我的答案。谢谢然后，您可以使用.hasClass（）筛选逻辑。这将只在单击的项中找到屏幕，而不在其他屏幕项中找到。我认为这不是我想要的行为（或者我可能误解了这个问题），这是个好问题；在重读这篇文章时，我不能确切地说出OP想要什么。@Peterver我向OP澄清了问题，并相应地更新了我的答案。谢谢当点击一个screenItem时，它应该改变所有screenPower元素的类别，还是只改变作为该screenItem子元素的screenPower元素？想象一下有两个屏幕。一个是“开”一个是“关”-当点击一个是“关”时，它应该是“开”的，而当前的屏幕是“开”变成“关”-希望它是有意义的：）所以一次只能打开一个屏幕-我只需编辑我的帖子，让它更清楚。谢谢你的提问：）他们俩都会离开吗？或者当一个screenItem被点击时，它是否总是一个关闭，一个打开？或者它是否总是一个关闭，一个打开？如果它改变了所有screenPower元素的类别，或者只有screenPower元素是该screenItem的子元素？想象一下有两个屏幕。一个是“开”一个是“关”-当点击一个是“关”时，它应该是“开”的，而当前的屏幕是“开”变成“关”-希望它是有意义的：）所以一次只能打开一个屏幕-我只需编辑我的帖子，让它更清楚。谢谢你的提问：）他们俩都会离开吗？还是总是一个关，一个开“还是总是一个关，一个开”