Question

我有一个绿色框，并使用toggleClass替换为红色框。外观上颜色会发生变化，但是我需要在div中删除当前类COMPLETELY并通过使用toggleClass添加新类。

问题：在检查器中添加新类时，当前类仍然存在。

请帮助

HTML

<div class="green">

</div>

 <button id="click" value="Click">
 Click Me
 </button>

JS

$('#click').click(function() {
    $('.green').toggleClass('red');
  //$('.green').toggleClass('red green');
})

Answer 1

添加其他类别或ID，并使用其在红色和绿色类别之间切换

$('#click').click(function() {
  $('.toggle').toggleClass('red green');
})

.red {
  background-color: red
}

.green {
  background-color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle green">
qwewqewq
</div>

<button id="click" value="Click">
 Click Me
 </button>

Answer 2

如果您愿意使用香草js，以下是香草js来实现您尝试的切换：

    <script>
    document.querySelector('#click').addEventListener('click', function(){
        let a = document.querySelectorAll('.colors')
        a.forEach((b)=>{
         if(b.classList.contains('green')){
           b.classList.remove('green')
           b.classList.add('red')
         }else if(b.classList.contains('red')){
           b.class.remove('red')
           b.class.add('green')
         }
      })
    })
    </script>

document.querySelector('#click').addEventListener('click', function(){
    let a = document.querySelectorAll('.colors')
    a.forEach((b)=>{
     if(b.classList.contains('green')){
       b.classList.remove('green')
       b.classList.add('red')
     }else if(b.classList.contains('red')){
       b.classList.remove('red')
       b.classList.add('green')
     }
  })
})

.colors{
   height:50px;
   width: 50px;
}
.green{
   background: green;
}
.red{
   background: red;
}

<div class="colors green"></div>
<button id="click">click</button>

Answer 3

我注意到您正在使用toggleClass方法。此方法根据匹配项的存在或状态参数的值，从匹配的元素集中的每个元素中添加或删除一个或多个类。

但是，您使用它的方式是错误的，在这里我将解释原因。在您的代码中，您使用过$('.green').toggleClass('red green');只能使用一次，因为当div的类将从.green变为.red时，将不会{{ 1}}元素了，您的脚本将不会再次应用。

解决方案很简单，只需为元素定义ID或应用辅助类即可。

添加ID

只需为div.green定义一个ID，例如div。此解决方案将仅为此元素切换element-id和.green类，如下所示：

.red

$('#click').click(function() {
  $('#element-id').toggleClass('red green');
})

#element-id {
  height: 50px;
  width: 100px;
  margin: 25px;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}

带有辅助课程

只需为<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="element-id" class="green"></div> <button id="click">Click Me</button>定义一个辅助类，例如本示例中的div。优点是可以将其应用于多个这样的元素：

aux-class

$('#click').click(function() {
  $('.aux-class').toggleClass('red green');
})

.aux-class {
  height: 50px;
  width: 100px;
  margin: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}

Answer 4

尝试一下，它将替换为删除当前的COMPLETELY类。

var data = $('#target').attr('class');

$('#target').click(function(){
    ($(this).attr('class') == data) ? $(this).attr('class','green') : $(this).attr('class',data);
});

.blue{
   background: #17a2b8!important;
}
.green {
    background: #28a745!important;
}
h1{
    color:#fff;
    padding:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="target" class="blue">Hello World</h1>

toggleClass：删除当前类并添加新类

4 个答案:

添加ID

带有辅助课程