Question

我的HTML如下。

<div class="box w-25 h-25">
<p>test</p>
</div>
<div class="box w-30 h-30">
<p>test</p>
</div>
<div class="box w-30 h-30">
<p>test</p>
</div>

和我的css

.test {
width:100%
height:100%
z-index: 999
}

.box {
....
}

.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-40{ width: 40%; }

.h-25{ height: 25%; }
.h-30{ height: 30%; }
.h-40{ height: 40%; }

当我使用jQuery单独点击它们以创建叠加效果时，是否可以用.test替换原始类？

Answer 1

删除/替换类

有几种方法可以删除所有类，只留一个。您可以使用$.attr：

$(".box").on("click", function(){
  $(this).attr("class", "test");
});

这会将class的完整值设置为单个类名。或者，您可以在元素本身上设置className：

$(".box").on("click", function(){
  this.className = "test";
});

或者，您可以在没有任何参数的情况下调用$.removeClass()（删除所有类），然后通过添加test类来跟进：

$(".box").on("click", function(){
  $(this).removeClass().addClass("test");
});

避免歧义

我假设你在页面上没有任何其他.box元素 - 如果你这样做，这里使用的选择器需要稍微修改一下，只影响我们希望定位的方框

如果这些盒子放在一个更大的容器内：

<div id="boxes">
  <div class="box w-25 h-25">...</div>
  <div class="box w-30 h-30">...</div>
</div>

我们可能会更改选择器以包含容器id：

$("#boxes .box").on("click" function(){
  /* React */
});

打开/关闭

从评论中，OP表示希望记住原始类，并且如果第二次点击该元素，则交换.test。以下是一个可能的解决方案：

$(".box").on("click", function(){
  // Store original class attribute as data
  $(this).data("o") || $(this).data("o", $(this).attr("class"));
  // Set new class attribute to test, or to original
  $(this).attr("class", function(i,o){
    return o != $(this).data("o") ? $(this).data("o") : "test" ;
  });
});

Answer 2

如果你想从一个div中删除所有类，你所要做的就是：

$('.box').attr('class', 'test');

这将用你想要的任何东西替换整个class属性。或者你可以清空class属性：

$('.box').attr('class', '');

然后使用以下代码以编程方式为任何类添加addClass：

$('.box').addClass('test');

Answer 3

$(".box").on("click", function(){
  $(this).removeClass(). // remove all class
         addClass("test");
});

Answer 4

这将继续使用box切换test班级。另外，我添加了一个检查，其中只有当div具有其他类，即w-xx和h-xx时才会更改类。

@Jonathan，请看我们如何改进这个。我在这里创建了演示：http://jsbin.com/ucotot/

$(function() {
  $('div.box').click ( function () {
    var classes = $(this).attr ('class').split(' ');

    var widthClassFound = false;
    var heightClassFound = false;
    for ( i = 0; i < classes.length; i++ ){
      if ( classes[i].match("^w-") ){
        widthClassFound = true;
    }

      if ( classes[i].match("^h-") ){
        heightClassFound = true;
    }

    }

    if ( widthClassFound && heightClassFound ) {
      if ( $(this).data('originalClass') ) {
        $(this).removeClass().addClass($(this).data('originalClass'));
        $(this).removeData('originalClass'); 
      }else{

      $(this).data ( 'originalClass', $(this).attr ('class') ); //Saving all class box, w-xx , h-xx
       $(this).removeClass('box').addClass('test');

      }

    }


  });

});

修改

上面的代码用box切换test类，因为@Clement要求使用test切换所有类以下代码。见demo：http://jsbin.com/ucotot/3

$(function() { $('div.box, div.test').click ( function () { if ( $(this).data('originalClass') ) { // if 'originalClass' is present in data then use it and return; $(this).removeClass().addClass($(this).data('originalClass')); $(this).removeData('originalClass'); return; } var classes = $(this).attr ('class').split(' '); var widthClassFound = false; var heightClassFound = false; for ( i = 0; i < classes.length; i++ ){ if ( classes[i].match("^w-") ){ widthClassFound = true; } if ( classes[i].match("^h-") ){ heightClassFound = true; } } if ( widthClassFound && heightClassFound ) { $(this).data ( 'originalClass', $(this).attr ('class') ); //Saving all class box, w-xx , h-xx $(this).removeClass().addClass('test'); } }); });

单击一个新类替换多个类的DIV

4 个答案:

删除/替换类

避免歧义

打开/关闭