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

Question

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

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

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

 $(function() { $('.one').click(function() { $("h1").addClass('.netxt'); $("h1").removeClass('twotxt, threetxt'); }); }); $(function() { $('.two').click(function() { $("h1").addClass('twotxt'); $("h1").removeClass('.netxt, threetxt'); }); }); $(function() { $('.three').click(function() { $("h1").addClass('threetxt'); $("h1").removeClass('.netxt, 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; }..netxt { 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 链接，演示了我目前拥有的代码，我的目的是让所有三个 DIV 元素在以任何顺序选择时更改顶部文本的颜色，如果可能的话使用类。

Answer 1

似乎主要问题是removeClass不支持多个 class 选择器（如“.netxt、twotxt”）。 此外，您不会根据点击顺序删除所有可能的类。

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

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()删除所有类。 这也许就是您需要的。

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

1. 重命名一些 class 名称。 .color-palette是所有颜色选择的容器。 .color是单独的颜色选择框。
2. 将data-color-name属性添加到.color 。 该属性将用于示例文本 css class 分配。
3. 使用单个事件委托处理程序简化点击事件。 我尝试将添加/删除 class 逻辑与实际颜色名称分离。 这样如果你有更多的彩盒要添加，就不需要再复制一套新的function。
4. 定义自定义 css 属性。 例如（ --color-1 、 --color-2 ）。 相同的属性用于颜色框背景和示例文本字体颜色。 您不必在两个不同的地方维护 colors。

 $('.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; }..netxt { 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>