通过共享的数据目标属性切换两个元素的活动状态
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过共享的数据目标属性切换两个元素的活动状态相关的知识，希望对你有一定的参考价值。
我目前正在使用下面的函数基于共享数据目标及其对应的“ .seating-map_section”来切换“ .card-header”类。我希望对此进行调整，以便在单击“ .seating-map_section”和/或“ .card-header”元素时，可以添加/删除这两个元素的变量activeClass。我不确定对这样的东西最好的方法是什么，所以任何帮助将不胜感激！
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);
});
答案
您可以这样做：
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>以上是关于通过共享的数据目标属性切换两个元素的活动状态的主要内容，如果未能解决你的问题，请参考以下文章