jquery如何实现当标签具有指定样式时隐藏？

Question

<div class="term">
    <b>面积</b>
    <div>
        <a>10</a>
        <a>20</a>
        <a>30</a>
        <a>40</a>
        <a>50</a>
    </div>
    <b>体积</b>
    <div class="change1">
        <a>10</a>
        <a>20</a>
        <a>30</a>
    </div>
    <b>容积</b>
    <div class="change2">
        <a>10</a>
        <a>20</a>
        <a>30</a>
    </div>
    <b>价格</b>
    <div class="change3">
        <a class="on">全部</a>
        <a>10</a>
        <a>20</a>
    </div>
</div>

代码如上，请问jquery如何实现当change3类下的第一个a标签的class类有on属性时，隐藏类名为change1和change2的两个div，第二个a标签的class类有on属性时，隐藏类名为change1的div，第三个a标签的class类有on属性时，隐藏类名为change2的div

Answer 1

$.each($('.change3 a'), function(index, item) {
    if ($(item).hasClass('on')) {
        if(index == 0) {
            $('.change1, .change2').hide();
        } else if(index == 1) {
            $('.change1').hide();
        } else if(index == 2) {
            $('.change2').hide();
        } else {
            return;
        }
    }
});

Answer 2

a标签增加class on时隐藏

Answer 3

谁改的第三个标签下的 a 的 on 的 class 谁自己负责把剩下的事情做了。

看你的描述，就是 change3 下的 a 标签的 on 在不停切换，对吧？那切换总有一个变化源头吧，你切换 a 标签的 on class 的时候，还要做什么东西你一并处理了就行，为什么要在另外一个地方去实现“当第几个a有on做某件事”这种东西？a 标签 的 on class 又不会莫名其妙变了，总有 js 在改吧。

你倘若是说用 css 实现，嗯，可以理解，但是 css 没有父级选择器所以实现不了。用 jQuery ？那你是在解耦么？改 a 标签 class 的 js 不想和隐藏 change1 change2 的代码不能放到一块？

Answer 4

如果你不能改操作 class 的脚本的话，可能 Mutation Observer 是唯一的办法了。不过似乎 jQuery 还没有内置这东西。

原生 JS 的一种做法，作个参考：

// 获取 .change1, .change2, .change3，实践中该方法需要改进。
const eleList = document.querySelectorAll('[class^="change"]');
const observer = new MutationObserver((mutationList) => {
  mutationList.forEach(({target}) => {
    // eleList[2] 即 .change3。
    if (target.parentNode !== eleList[2]
    || !target.classList.contains('on')) return;

    // 这里写得很死，主要你的需求好像比较固定，没什么规律
    // .change* 列表多的时候就要优化。
    const index = [...eleList[2].children].indexOf(target);
    const showIndex = [-1, 1, 0][index];
    eleList.forEach((ele, i) => {
      if (i === 2) return;
      ele.style.visibility = i === showIndex ? 'visible' : 'hidden';
    });
  });
});

observer.observe(eleList[2], {
  attributeFilter: [ "class" ],
  subtree: true,
});