如何将类添加到另一个 div，当一个 div 有切换类时?

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((可以给出第二个参数，控制 toggle 的状态：

州

类型：布尔值

一个布尔值(不仅仅是真/假(值，用于确定是否应添加或删除类。

Answer 2

您可以在一个函数中完成所有操作。我已经完成了具有三元等值的更新类。我为 newclass 添加了红色，以证明在后续按钮单击时正在添加/删除该类。

$(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);
}

这将每100 ms调用一次hasClass函数