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

Question

我目前正在使用以下函数根据共享数据目标切换".card-header"类，其对应的".sseat-map_section"。我希望对此进行调整，以便在单击".sseat-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>