1

我的 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 替换原始类？

4

4 回答 4

2

删除/替换类

有几种方法可以删除所有类，只留下一个。你可以使用$.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" ;
  });
});
于 2012-05-16T04:40:59.443 回答
0

这将继续用 切换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以下代码切换所有类。见演示：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');



    }


  });

});
于 2012-05-16T05:26:59.880 回答
0 
$(".box").on("click", function(){
  $(this).removeClass(). // remove all class
         addClass("test");
});
于 2012-05-16T04:52:22.890 回答
0

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

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

这将用您想要的任何内容替换整个类属性。或者你可以清空类属性：

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

然后对您需要以编程方式使用的任何类执行 addClass ：

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

于 2012-05-16T04:47:38.590 回答