class属性が動いた時にjs発動

Question

class属性が動いた時にjsが発動するという処理はありますか？

下記のような記述があり、
active01が例えばbox3へ移動したら、active02のstyle属性を無効。
active02が動いたら、active01のstyle属性を無効。
という処理はできますでしょうか？

<div class="test active01">BOX1</div>
<div class="test active02">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

active02は下記で移動させています。
active01はカスタマイズしたいプラグイン自体で移動するようになっており、別々のjsで移動させています。

$( 'select' ).change( function() {
    var val = this.value;
    $( '.lg-thumb-item' ).removeClass( 'active02' ).eq( val - 1 ).addClass( 'active02' );
} );

Comments

[m.ts10806]

どう移動させるのでしょうか。JavaScriptでも利用しない限り勝手に移動することはないですよね。「移動させる」処理をご提示ください。
というか、その移動させる処理に加えればいいのではないでしょうか。

[退会済みユーザー]

ご回答ありがとうございます。
処理も付け加えました。
ただ、active01とactive02では別々のjsで動かしています。

[yambejp]

前回と似たような質問ですが完全にちがうのでしょうか？
連携して処理するならそのあたりも書いたほうがよいかと

[退会済みユーザー]

ご回答ありがとうございます。
一応別物として分けて考えています。
どちらもお聞きしたかったので、分かりやすく別けたつもりでしたが、あまり良くなかったですかね。

[yambejp]

いや違うなら大丈夫です、似た感じだったのでどうかなと思って

Answer 1

active01が例えばbox3へ移動したら、active02のstyle属性を無効。

active02が動いたら、active01のstyle属性を無効。
という処理はできますでしょうか？

いちおう、MutationObserverという、DOMの変更を監視する仕組みはあります（MDN）が、クラスの変化はコードでしか起きないわけですし、クラスを変更している処理のところにコードを仕掛けるほうが遥かに簡単ではないかと思います。

Comments

[m.ts10806]

>MutationObserver
私が使いこなせてないだけかもしれませんが、これじゃないとダメな場面が思いつかないですね・・。

[maisumakun]

FontAwesome 5では動的にsvgタグを生成していますが、それを従来どおりHTML上には<i>タグで書けるようにするために、DOMを監視して動的に置き換えをやっています。

（もっとも、Reactなどとの相性はまったく合わないので、react-fontawesomeなどを使っていて、この動的置き換えを実用したことはないですが）

[退会済みユーザー]

すみません。ほぼほぼ初心者なのですが、MutationObserverというのは、下記で問題ありませんでしょうか？
https://qiita.com/ryo_hisano/items/9f15ae87d691d497bc17

-----------------------------------------------------------------------------------------
const target = document.getElementById('target');

// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
// 何かしたいこと
console.log(mutation.target);
});
});
-----------------------------------------------------------------------------------------

[m.ts10806]

＞従来どおりHTML上には<i>タグで書けるようにするため

アイコンフォントではよく見られる手法ですね。ちょっと勉強になりました。

Answer 2

active01が例えばbox3へ移動したら

動かすためのトリガーに「active02のstyle属性を無効」を書くだけでは？
自然に変わるわけでもないでしょうしね

sample

<style>
.active01{color:red;}
.active02{background-Color:yellow;}
</style>
<script>
window.addEventListener('DOMContentLoaded',function(){
  var t = document.querySelectorAll(".test")[0];
  var mo = new MutationObserver(function(r){
    console.log(r[0].oldValue);
    console.log(r[0].target.classList);
  });
  const opt = {
  attributes: true,
  attributeOldValue:true,
  attributeFilter:['class'],
  };
  mo.observe(t, opt);
  document.querySelector('#btn1').addEventListener('click',function(e){
    if(t1=document.querySelectorAll(".test")[0]) t1.classList.remove('active01');
    if(t2=document.querySelectorAll(".test")[2]) t2.classList.add('active01');
  });
  document.querySelector('#btn2').addEventListener('click',function(e){
    
  });
});

</script>
<input type="button" id="btn1" value="change active01 1→3">
<div class="test active01">BOX1</div>
<div class="test active02">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

Comments

[yambejp]

「active01が例えばbox3へ移動したら」の考え方にもよりますよね
・box1に.active01がついていなければ・・・という条件だと
.active01がもともとついていたかどうかを保持しないといけないです
MutationObserverで属性がかわったことを把握できても
それが「.active01が外れた」かどうかどこまで厳密に判断する
必要があるか次第です

[退会済みユーザー]

色々と詳しく本当にありがとうございます。
ローカル環境では対応できましたが、プラグインに導入するとバッティングなのかできませんでした。
他の方法を考えてみます。。。

Answer 3

active01が例えばbox3へ移動したら、active02のstyle属性を無効。
active02が動いたら、active01のstyle属性を無効。

各々の発動条件が不明ですが、それぞれの処理からもう一方の処理を呼び出すように組めば良いでしょう。
jQueryのイベント駆動ならば、.trigger() でイベントを発火することが可能です。
http://api.jquery.com/trigger/

Re: Reeeechi0713 さん