通过共享数据目标属性切换两个元素的活动 state

Question

我目前正在使用下面的 function 来切换基于共享数据目标的“.card-header”的 class 及其对应的“.seating-map_section”。 我希望对此进行调整，以便在单击“.seating-map_section”和/或“.card-header”元素时，添加/删除两个元素的变量 activeClass。 我不确定最好的方法是什么，所以任何帮助将不胜感激！

对于上下文，这是我想要的效果： https://www.nba.com/timberwolves/tickets/memberships

  var $activeItem = $(".seating-map_section");
  var activeClass = "active";

  $activeItem.click(function() {
    const id = $(this).attr('data-target');
    const $collapse = $(`.card-header[data-target=${id}]`);

    if ($collapse) {
      $collapse.toggleClass(activeClass);
    }

    $(this).toggleClass(activeClass);
  });

Answer 1

请看下面的代码。 它可能会起作用。

Check: http://jsfiddle.net/mehdi354/5yvds8t2/1/

Answer 2

你可以这样做：

 var $activeItem = $(".seating-map_section, .card-header"); var activeClass = "active"; $activeItem.click(function() { const id = $(this).attr('data-target'); const $collapse = $(`.card-header[data-target=${id}], .seating-map_section[data-target=${id}]`); if ($collapse) { $collapse.toggleClass(activeClass); } });

 .active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="seating-map_section" data-target="1"> Seating map section </div> <div class="card-header" data-target="1"> Card header </div>