通過共享數據目標屬性切換兩個元素的活動 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>