在多个下拉jQuery上添加和删除类

Question

我掉了三次..。当我单击数据列=“1”(动量Jeans短裤)的div时，我希望当前下拉列表删除数据列=“1”(动量短路)的“活动”和“禁用”类，并在选定的div上添加“禁用”和“活动”类，即数据列=“1”(动量Jeans短裤)。

在我的第二个下拉列表中，我希望数据列=“1”(动量短片)没有“禁用”&“活动”类。数据列=“2”(动量牛仔裤短裤)将有“禁用”类。

我已经尝试了这么多小时，但我似乎不能正确的算法。我附上了一张下降的截图，希望你能得到我想要达到的目标

<nav>
    <ul class="cf">
      <li>
        <div>
            <a class="dropdown" href="#">CHANGE SHORT</a>
            <ul>
            
            <li>
                <div class="compare-filter-item  active disable" data-column="1" data-product="momentum-shorts">Momentum Shorts</div>
            </li>
            
            <li>
                <div class="compare-filter-item disable" data-column="1" data-product="momentum-shorts-2-0">Momentum Shorts 2.0</div>
            </li>
            
            <li>
                <div class="compare-filter-item disable" data-column="1" data-product="ease-linen-shorts">Ease Linen Shorts</div>
            </li>
            
            <li>
                <div class="compare-filter-item " data-column="1" data-product="momentum-jeans-shorts">Momentum Jeans Shorts</div>
            </li>
            
            </ul>
        </div>
      </li>
      <li>
        <div>
            <a class="dropdown" href="#">CHANGE SHORT</a>
            <ul>
                
                <li>
                <div class="compare-filter-item disable" data-column="2" data-product="momentum-shorts">Momentum Shorts</div>
                </li>
                
                <li>
                <div class="compare-filter-item  active disable" data-column="2" data-product="momentum-shorts-2-0">Momentum Shorts 2.0</div>
                </li>
                
                <li>
                <div class="compare-filter-item disable" data-column="2" data-product="ease-linen-shorts">Ease Linen Shorts</div>
                </li>
                
                <li>
                <div class="compare-filter-item " data-column="2" data-product="momentum-jeans-shorts">Momentum Jeans Shorts</div>
                </li>
                
            </ul>
        </div>
      </li>
      <li>
        <div>
            <a class="dropdown" href="#">CHANGE SHORT</a>
            <ul>
                
                <li>
                <div class="compare-filter-item disable" data-column="3" data-product="momentum-shorts">Momentum Shorts</div>
                </li>
                
                <li>
                <div class="compare-filter-item disable" data-column="3" data-product="momentum-shorts-2-0">Momentum Shorts 2.0</div>
                </li>
                
                <li>
                <div class="compare-filter-item  active disable" data-column="3" data-product="ease-linen-shorts">Ease Linen Shorts</div>
                </li>
                
                <li>
                <div class="compare-filter-item " data-column="3" data-product="momentum-jeans-shorts">Momentum Jeans Shorts</div>
                </li>
                
            </ul>
         </div>
        </li>
    </ul>
  </nav>


$(function() {
            $(".compare-filter-item").on("click",function() {
                const column_value = $(this).attr("data-column");
                const selected_data_product = $(this).attr("data-product");

                $('.compare-filter-item[data-product="' + selected_data_product + '"][data-column="' + column_value + '"]').parent().parent().find(".active.disable").removeClass("active disable");


                $("[data-product='" + selected_data_product + "']").addClass("disable");
                $(this).addClass("active");

                const myarray = $(`.compare-all .compare-products [data-product="${selected_data_product}"]`).map(function() {
                return $(this).html();
                });

                $(`.compare-main .compare-products [data-column="${column_value}"]`)
                .each(function(i) { $(this).html(myarray[i]) });
            });
        });

​

​

Answer 1

OP中描述的行为称为相互排他性。基本上只能选择一个组中的一个，就像共享相同[name]的单选按钮一样。

首先，为所有项分配一个公共类：

<li><a href='#' class='link'></a></li>

接下来，为每组共享相同位置的3项设置一个"group“类：

<!-- For example, each 2nd item of each dropdown -->
<li><a href='#' class='link x1'></a></li> // 1st dropdown
<li><a href='#' class='link x1'></a></li> // 2nd dropdown
<li><a href='#' class='link x1'></a></li> // 3rd dropdown

然后向每个项添加一个data-*属性，调用它为data-group，并分配与新类相同的值：

<li><a href='#' class='link x1' data-group='x1'></a></li> 

CSS

需要两类：

.active {
  color: blue;
  background: goldenrod
}

.disabled {
  pointer-events: none;
  color: white;
  background: grey;
}

jQuery

首先，将所有.link注册到"click“事件。当一个.link被点击..。

$('.link').on('click', function() {
  // Get the clicked .link's [data-group]
  const group = $(this).data('group');
  ...

最后，使每个.link能够打开/关闭.toggle() .active类。如果单击的.link是.active，那么将.disabled添加到共享同一组的其他2项中，否则从其他2项中删除.disabled：

...
  $(this).toggleClass('active');
  if ($(this).is('.active')) {
    $('.' + group).not(this).addClass('disabled');
  } else {
    $('.' + group).removeClass('disabled');
  }

​

$('.trigger').on('click', function() {
  $(this).next().slideToggle();
});

$('.link').on('click', function() {
$(this).closest('ul').find('.link').removeClass('active');
  $(this).addClass('active');
  $('.link').removeClass('disabled');
  $('ul').each(function() {
    activate(this);
  });
});

function activate(selector) {
  const act = $(selector).find('.active');
  if (act) {
    const group = $(act).data('group');
    $('.' + group).not(act).addClass('disabled');
  } 
  if (!act) {
    $('.' + group).removeClass('disabled');
  }
}

html {
  font: 2ch/1.15 'Segoe UI';
}

body {
  overflow-y: scroll;
}

nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

menu {
  width: 30%;
  margin-left: -40px;
}

ul {
  display: none;
  list-style: none;
  margin-left: -40px;
}

a {
  color: black;
  text-decoration: none;
}

a,
li {
  display: block;
  text-align: center;
}

.active {
  color: blue;
  background: goldenrod
}

.disabled {
  pointer-events: none;
  color: white;
  background: grey;
}

<nav>
  <menu>
    <a href='#' class='trigger'>Xn</a>
    <ul>
      <li><a href='#' class='link x0' data-group='x0'>X0</a></li>
      <li><a href='#' class='link x1' data-group='x1'>X1</a></li>
      <li><a href='#' class='link x2' data-group='x2'>X2</a></li>
      <li><a href='#' class='link x3' data-group='x3'>X3</a></li>
      <li><a href='#' class='link x4' data-group='x4'>X4</a></li>
    </ul>
  </menu>
  <menu>
    <a href='#' class='trigger'>Xn</a>
    <ul>
      <li><a href='#' class='link x0' data-group='x0'>X0</a></li>
      <li><a href='#' class='link x1' data-group='x1'>X1</a></li>
      <li><a href='#' class='link x2' data-group='x2'>X2</a></li>
      <li><a href='#' class='link x3' data-group='x3'>X3</a></li>
      <li><a href='#' class='link x4' data-group='x4'>X4</a></li>
    </ul>
  </menu>
  <menu>
    <a href='#' class='trigger'>Xn</a>
    <ul>
      <li><a href='#' class='link x0' data-group='x0'>X0</a></li>
      <li><a href='#' class='link x1' data-group='x1'>X1</a></li>
      <li><a href='#' class='link x2' data-group='x2'>X2</a></li>
      <li><a href='#' class='link x3' data-group='x3'>X3</a></li>
      <li><a href='#' class='link x4' data-group='x4'>X4</a></li>
    </ul>
  </menu>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​