2

jquery を使用して からクラスを削除するコードがあります<div>。クラスが削除されたときにイベントを介して別のjquery関数をトリガーすることは可能ですか?

html

<div class="square"></div> <br/>
<div class="square test"></div><br/>
<div class="square"></div> <br/>
<div class="square"></div>
<button>test</button>

CSS

.square{
width: 100px;
height: 100px;
background-color: red;
}
.pink{
background-color:pink;
}

JavaScript

$(document).on("*changedtopink*", "div", function(){
   alert("it changed");
});
$(document).on("click","button",function(){
   $(".test").addClass("pink");
});
4

3 に答える 3

2

あなたはtriggerあなた自身のイベントをすることができます：

HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>

CSS

.square{
    width: 100px;
    height: 100px;
    background-color: red;
}

.rectangle{
    width: 200px;
    height: 100px;
    background-color: green;
}

jQuery

$("div").on("changedClass", function(){
    $(this).addClass("rectangle");
});

$(document).on("click", "div", function(){
    $(this).removeClass("square");               
    $(this).trigger("changedClass");
});

この例で赤い四角をクリックすると、.squareクラスが削除され、新しく定義され changedClassたイベントがトリガーされます。このイベントは指定されたものに対して発生しdiv、新しいクラスまたはを追加します.rectangle。

例

編集：

HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>  
<input type="hidden" value="N" />

jQuery

//When the input is changed, add the rectangle class
$("input").on("change", function(e, divEl){
    $(divEl).addClass("rectangle");
});

//when a div is clicked, trigger a change event for the input place holder.
$(document).on("click", "div", function(){             
    $("input").trigger("change", [this]);
});


//regualr click event for your div
$(document).on("click", "div", function(){             
    $(this).removeClass("square");
});

例

ボタンを使用するもう1つの例を次に示します。

于 2013-01-31T18:20:34.200 に答える
0

2021 年にこれを行う正しい (標準化過程) 方法は、MutationObserver を使用することです: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

上記のリンクを読んでから、呼び出すときobserver.observe()に 2 番目のパラメーターとして一連のオプションを渡し{attributes: true}ます。オプションとして渡すと、ミューテーション オブザーバーは関連する要素のすべての属性の変更を監視します。は属性であるためclass、クラスが要素に追加または削除されると、ミューテーション オブザーバーはそのコールバックを起動します。コールバック内から要素をチェックして、classList必要なクラスをフィルタリングするだけです。

MutationObserver の使用方法の詳細: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver

于 2021-02-08T01:57:25.967 に答える
0

Dom Change イベントがありますが、すべてのブラウザーで広くサポートされているわけではありません。ユースケースに適している場合、最も安全なアプローチは、タイマーでクラスをチェックし、クラスの変更を検出したときに関数を実行することだと思います。

var hasClass = false;

setInterval(function(){
  if($('#selector').hasClass('myClass') != hasClass){
    hasClass = $('#selector').hasClass('myClass')
    // fun your custom function here
  }
},100)
于 2013-01-31T18:12:04.520 に答える