jquery - 根据类名值更改类名

Question

我目前有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>

Answer 1

When the screenItem is clicked, check if it has any .screenOff descendents. If so, then you can find all screenPower elements and use the toggleClass function to add and remove the screenOff and screenOn classes:

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

This assumes that screenPower starts as either screenOff or screenOn, which from your example seems to be the case.

Working Demo

Answer 2

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

   var clickedbutton = this;
}

Answer 3

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

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