[英]How to add class to another div, When a div has toggle class?
Please read here clearly:- 请在这里清楚阅读:-
I want to add a class at <div id="targetdiv">
我想在
<div id="targetdiv">
添加一个类
When i click on button <button id="btn">Btn</button>
, It will toggle class to <div id="dynamicdiv">
当我单击按钮
<button id="btn">Btn</button>
,它将把类切换为<div id="dynamicdiv">
So i want when, The class toggle at <div id="dynamicdiv">
, a another class will toggle at <div id="targetdiv">
. 所以我想当类在
<div id="dynamicdiv">
切换时,另一个类将在<div id="targetdiv">
切换。
Working code:- 工作代码:
$(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>
One possible approach: 一种可能的方法:
$("#btn").click(function() {
var $dynamicDiv = $('#dynamicdiv');
$dynamicDiv.toggleClass('test');
$('#targetdiv').toggleClass('newclass', $dynamicDiv.hasClass('test'));
});
.toggleClass() can be given a second param, controlling the state of toggle: .toggleClass()可以被赋予第二个参数,控制切换的状态:
state
州
Type: Boolean
类型:布尔
A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
一个布尔值(不仅仅是真或假),用于确定是添加还是删除该类。
You can do it all in the one function. 您可以在一个功能中完成所有操作。 I have done the update class with a ternary equartion.
我用三元运算完成了更新类。 I added a red color to the newclass to demonstrate the class is being added / removed on subsequent button clicks.
我向新类添加了红色,以演示在随后的按钮单击中添加/删除了该类。
$(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>
Not sure what -> function hasClass(){
you thought this was meant to do,. 不确定->
function hasClass(){
您认为这是本来应该做的。 It was a function that was never called. 这个函数从未被调用过。
But I think below is what you was after. 但我认为以下是您所追求的。
$(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>
$(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>
As far as I know, there is no event listener for a class change. 据我所知,没有用于类更改的事件侦听器。 But you can create something similiar with an interval:
但是您可以创建一个类似的间隔:
$(document).ready(function(){
$("#btn").click(function(){
$("#dynamicdiv").toggleClass("test")
});
function hasClass(){
$('#targetdiv').toggleClass('newclass', $('#dynamicdiv').hasClass('test'));
}
setInterval(hasClass, 100);
}
This will call the hasClass
function every 100 ms
这将每
100 ms
调用一次hasClass
函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.