jquery根据元素属性在ID之间切换答案

【问题标题】：jquery toggle between ID's based on element attributejquery根据元素属性在ID之间切换
【发布时间】：2020-07-22 22:03:06
【问题描述】：

我有这个

$(".picker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    $('body').addClass('picker-' + imgID);
});

<span class="taPicker" data-imgID="0"></span>
<span class="taPicker" data-imgID="1"></span>
<span class="taPicker" data-imgID="2"></span>

我想在 body 元素上的通用类之间切换，例如，如果您单击 .picker，我想根据 data-imgID 属性向 body 元素添加一个唯一类

但是，我怎样才能防止重复呢？例如，如果您单击另一个 .picker 我想删除以前的类并添加一个新的

【问题讨论】：

使用带有部分选择器的删除类函数，以便在添加新类之前删除所有以picker- 开头的类。见stackoverflow.com/questions/41832255/…
这能回答你的问题吗？ jQuery removeClass wildcard
@GillesC 不要认为您可以在 .removeClass 中使用通配符 - 您提供的链接是针对选择器的，而不是 removeClass 的参数 - 但是您可以使用此处所示的函数：jQuery removeClass wildcard（所以原理一样）
@freedomn-m 是的，不能使用通配符，超过 10 年没有使用 jQuery，所以应该先检查文档。但它也不仅仅是函数，它也可以将类列表作为字符串或数组。

标签： javascript jquery

【解决方案1】：

在你的情况下，你可以这样做：

var selectedClass = null;
$(".taPicker").click(function(e) {
  var imgID = $(this).attr("data-imgID");
  $('body').addClass('picker-' + imgID);
  if (selectedClass != null) {
    $('body').removeClass(selectedClass);
  }
  selectedClass = 'picker-' + imgID;
});

body.picker-0 {
  background-color: pink;
}

body.picker-1 {
  background-color: red;
}

body.picker-2 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="taPicker" data-imgID="0">click 0</span>
<span class="taPicker" data-imgID="1">click 1</span>
<span class="taPicker" data-imgID="2">click 2</span>

这是fiddle

【讨论】：

只是指出，点击处理程序必须设置在.taPicker，否则这将不起作用。
转换为sn-p，无需提琴

【解决方案2】：

另一种方法是确定需要在每次后续更新中删除的类。为此，您可以在设置新类之前使用解析当前类并删除任何包含picker- 的类的函数。

下面是 JS 代码的样子：

function getPickerClasses(index, className) {
  return className.split(' ').filter((classItem) => classItem.includes('picker-'));
}

$(".taPicker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    
    $('body').removeClass(getPickerClasses).addClass('picker-' + imgID);
});

这样，在设置新类之前，旧类被删除。看看这个小提琴，看看代码在起作用：https://jsfiddle.net/0u24a1g3/

【讨论】：

【解决方案3】：

不用添加额外的全局变量也可以做到

$(".taPicker").click(function(e) {
  var imgID = $(this).attr("data-imgID");
  $('body').removeClass(function() {
    return (this.className.match(/picker-./g) || []).join(' ');
  });
  $('body').addClass('picker-' + imgID);
});

body.picker-0 {
  background-color: pink;
}

body.picker-1 {
  background-color: red;
}

body.picker-2 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="taPicker" data-imgID="0">click 0</span>
<span class="taPicker" data-imgID="1">click 1</span>
<span class="taPicker" data-imgID="2">click 2</span>

【讨论】：

【解决方案4】：

您可以在 DOM 就绪的变量中捕获 body 的原始类，然后使用 .removeClass()，然后重新添加原始类以及基于单击元素的类。

$(".taPicker").click(function(e) {
    var imgID = $(this).attr("data-imgID");
    var picker = $('body').attr("class").match(/picker-\d+/g) || [];
    $('body').removeClass(picker).addClass('picker-' + imgID);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="original">
<span class="taPicker" data-imgID="0">0</span>
<span class="taPicker" data-imgID="1">1</span>
<span class="taPicker" data-imgID="2">2</span>
</body>

【讨论】：

可能会在其他地方添加另一个 body 类，然后在下次单击 picker 后将被忽略