Question

请在这里清楚阅读：-

我想在<div id="targetdiv">上添加一个班级

当我单击按钮<button id="btn">Btn</button>时，它将把班级切换到<div id="dynamicdiv">

所以我想当类在<div id="dynamicdiv">切换时，另一个类在<div id="targetdiv">切换。

工作代码：-

$(document).ready(function(){
  $("#btn").click(function(){
    $("#dynamicdiv").toggleClass("test")
  })
  function hasClass(){
    if($('#dynamicdiv').hasClass('test') ){
      $('#targetdiv').addClass('newclass');
    }else {
      $('#targetdiv').removeClass('newclass');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamicdiv">sfasdfasf</div>

<div id="targetdiv"><h1>qwer</h1></div>

<button id="btn">Btn</button>

Answer 1

一种可能的方法：

$("#btn").click(function() {
  var $dynamicDiv = $('#dynamicdiv');
  $dynamicDiv.toggleClass('test');
  $('#targetdiv').toggleClass('newclass', $dynamicDiv.hasClass('test'));
});

可以为

.toggleClass()提供第二个参数，以控制切换状态：

状态

类型：布尔

一个布尔值（不仅仅是真/假），以确定是否应该添加或删除该类。

Answer 2

您可以在一个功能中完成所有操作。我用三元运算完成了更新类。我向新类添加了红色，以演示在随后的按钮单击中添加/删除了该类。

$(document).ready(function(){

$("#btn").click(function(){
  $("#dynamicdiv").toggleClass("test");
      
  $('#dynamicdiv').hasClass('test')
    ? $('#targetdiv').addClass('newclass')
    : $('#targetdiv').removeClass('newclass');
  });
})

.newclass { color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamicdiv">sfasdfasf</div>

<div id="targetdiv"><h1>qwer</h1></div>

<button id="btn">Btn</button>

Answer 3

不确定是什么-> function hasClass(){，您认为这是应该做的。这个函数从未被调用过。

但是我想下面是你所追求的。

$(document).ready(function(){
  $("#btn").click(function(){
    var d = $("#dynamicdiv");
    d.toggleClass("test")
    $("#targetdiv").
      toggleClass("newclass", d.hasClass("test"));
  })
});

.test {
  background-color: red;
}

.newclass {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dynamicdiv">sfasdfasf</div>

<div id="targetdiv"><h1>qwer</h1></div>

<button id="btn">Btn</button>

Answer 4

$(document).ready(function(){

		$("#btn").click(function(){
			$("#dynamicdiv").toggleClass("test");
      $('#dynamicdiv').hasClass('test')?$('#targetdiv').addClass('newclass'):$('#targetdiv').removeClass('newclass');
			
		});

		
	});

.test{
  color:red;
  font-size:36px;
  font-weight:bold;
}

.newclass{
   border:1px solid green;
   background:blue;
   color:white;
}


#targetdiv{
padding:8px;
height:90px;
width:180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="dynamicdiv">Dynamic Div</div>
<div id="targetdiv"><h1>Target Div</h1></div>

<button id="btn">Btn</button>

Answer 5

据我所知，没有用于类更改的事件侦听器。但是您可以创建一个类似的间隔：

$(document).ready(function(){
    $("#btn").click(function(){
        $("#dynamicdiv").toggleClass("test")
    });

    function hasClass(){
        $('#targetdiv').toggleClass('newclass', $('#dynamicdiv').hasClass('test'));
    }

    setInterval(hasClass, 100);
}

这将每个hasClass调用100 ms

当一个div具有切换类时，如何向另一个div添加类？

5 个答案: