MutationOberverのサンプル_技術三昧ブログ

ホーム » ブログ » MutationOberverのサンプル

@2018/10/30

下記の例で、checkboxをON/OFFに状態変更したら、checkbox所属の親要素divのclass名にActiveクラスを入れる。
MutationObserverメソッドはdivのクラス名に監視し、クラス名の変更がありましたら、最新のクラス名を画面に表示する。
ソースをコピペで検証してね。



<html>
<head>
<script type="text/javascript" src="https://www.benri.jp/js/jquery/jquery-1.9.1.min.js"></script>
<script>

$(function(){
	//監視対象Element
	var target = document.getElementById('target');

	var attrFilter = ["class"];//class名の変化を監視
	options = {attributes: true,attributeFilter:attrFilter};//監視オプション

	var mo = new MutationObserver(hogeFun);
	//対象に監視する
	mo.observe(target, options);

	//監視対象のイベントを発生させる（トリガー）
	$('#child-aaa').on('click',function(){
		$(this).parent().toggleClass('Active');
	});

});

/*
 * サンプル処理
 */
function hogeFun() {
	var className = $('#target').attr('class');
	
	let message = 'targetのクラス名：' + className;
	$('#ob-result').empty;
	$('#ob-result').text(message);
	//alert(className);
// 要素が追加された時に実行する処理
}

</script>
</head>
<body>
<div class="Target" id="target">
	<input type="checkbox" name="aaa" id="child-aaa">
	<span id="ob-result">targetのクラス名：Target</span>
</div>

</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

0人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/308.html

閉じる

MutationOberverのサンプル_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！