如何在 jQuery 中的多个元素的多个类之间切换？

Question

所以我试图在我的网站上实现一组功能，其中包含多个 div 对象，这样当我点击 Div A 时，它会设置页面的文本颜色通过 Class A 变为红色，当我单击 Div B 时，它通过 Class B 将文本设置为绿色，依此类推。

我的问题是，当单击多个对象时，其他 class 不会取消设置，并且一个 class 会覆盖其他对象，因此文本的颜色不会再切换。

我一直在寻找解决方案并尝试使用 addClass() 和 removeClass()，但由于某种原因它不起作用。这是我的代码片段

$(function() {
  $('.one').click(function() {
    $("h1").addClass('onetxt');
    $("h1").removeClass('twotxt, threetxt');
  });
});

$(function() {
  $('.two').click(function() {
    $("h1").addClass('twotxt');
    $("h1").removeClass('onetxt, threetxt');
  });
});

$(function() {
  $('.three').click(function() {
    $("h1").addClass('threetxt');
    $("h1").removeClass('onetxt, twotxt');
  });
});

h1 {
  text-align: center;
}

div {
  height: 65px;
  width: 65px;
  margin: 20px auto;
  border-style: solid;
}


/*style info, ignore above here*/

.one {
  background-color: red;
}

.onetxt {
  color: red;
}

.two {
  background-color: green;
}

.twotxt {
  color: green;
}

.three {
  background-color: blue;
}

.threetxt {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

如有任何帮助，我们将不胜感激，如果您需要更多信息，请在回复中询问我，谢谢！

编辑： 这是一个 JSFiddle link 演示我目前拥有的代码，我的目的是将所有三个 DIV 元素更改为顶部以任意顺序选择时的文本颜色，如果可能，使用 classes。

Answer 1

似乎主要问题是 removeClass 不支持多个 class 选择器（如 'onetxt, twotxt'）。此外，根据点击的顺序，您并没有删除所有可能的 classes。

这是一个可能有效的解决方案。我已经编写了一些辅助函数，希望能弄清楚发生了什么。

const targets = 'h1, p'
const classmap = {
  one: 'onetxt',
  two: 'twotxt',
  three: 'threetxt'
}
const allclasses = Object.values(classmap);

function clearSelection() {
  allclasses.forEach(function(clz) { $(targets).removeClass(clz) });
}

function addSelection(sel) {
    $(targets).addClass(classmap[sel]);
}

$(function() {  
    $('.one').click(function(){
      clearSelection();
      addSelection('one')
    });
});

  $(function() {  
    $('.two').click(function(){
      clearSelection();
      addSelection('two')
    });
});

  $(function() {  
    $('.three').click(function(){
      clearSelection();
      addSelection('three')
    });
});

Answer 2

没有 .removeClass() 重载支持多个参数，它只删除第一个 class。 .removeClass() 不带参数删除所有 classes。这也许是您需要的。

我稍微调整了你的代码，包括：

重命名一些 class 名称。 .color-palette是所有颜色选择的容器。 .color为独立颜色选择框。
将 data-color-name attribute 添加到 .color。该属性将用于 sample-text css class 赋值。
用一个简单的点击事件，event-delegate handler。我尝试将 add/remove class 逻辑与实际颜色名称分离。这样如果你有更多的颜色框要添加，你不需要复制一套新的功能。
定义 custom css property。例如。（--color-1、--color-2）。同样的属性用于颜色框背景和示例文本字体颜色。你不必在两个不同的地方维护颜色。

$('.color-palette').on('click', '.color', function(e) {
  $("#sample-text").removeClass().addClass($(e.currentTarget).data('color-name'));
});

/* maintain the color choices here */
:root {
  --color-1: red;
  --color-2: green;
  --color-3: blue;
}

h1 {
  text-align: center;
}

.color {
  height: 65px;
  width: 65px;
  margin: 20px auto;
  border-style: solid;
}


/* style info, ignore above here */


/* color palette style */

.color.color-1 {
  background-color: var(--color-1);
}

.color.color-2 {
  background-color: var(--color-2);
}

.color.color-3 {
  background-color: var(--color-3);
}


/* sample text style */

#sample-text.color-1 {
  color: var(--color-1);
}

#sample-text.color-2 {
  color: var(--color-2);
}

#sample-text.color-3 {
  color: var(--color-3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="sample-text">Sample Text</h1>
<div class="color-palette">
  <div class="color color-1" data-color-name="color-1"></div>
  <div class="color color-2" data-color-name="color-2"></div>
  <div class="color color-3" data-color-name="color-3"></div>
</div>

Answer 3

这是一个基于 classList.toggle(className: string, force: boolean) 的普通 DOM API 解决方案。第二个参数控制 toggle 是作为 remove 还是 add.

const classes = ['one', 'two', 'three'];
classes.forEach(clazz => {
  document.querySelector(`.${clazz}`).addEventListener('click', () => {
    classes.forEach(cl => document.querySelector('h1').classList.toggle(`${cl}txt`, cl === clazz));
  })
})

h1 {
  text-align: center;
}

div {
  height: 35px;
  width: 35px;
  margin: 5px auto;
  border-style: solid;
}


/*style info, ignore above here*/

.one {
  background-color: red;
}

.onetxt {
  color: red;
}

.two {
  background-color: green;
}

.twotxt {
  color: green;
}

.three {
  background-color: blue;
}

.threetxt {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

如何在 jQuery 中的多个元素的多个类之间切换？

How do i toggle between multiple classes for multiple elements in jQuery?

javascript

jquery

如何在 jQuery 中的多个元素的多个 类 之间切换？

How do i toggle between multiple classes for multiple elements in jQuery?

javascript

jquery

如何在 jQuery 中的多个元素的多个类之间切换？