當一個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（）可以被賦予第二個參數，控制切換的狀態：

州

類型：布爾

一個布爾值（不僅僅是真或假），用於確定是添加還是刪除該類。

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

這將每100 ms調用一次hasClass函數