文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在多个类之间切换jQuery中的多个元素？

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

Stack Overflow用户

提问于 2022-05-21 15:08:41

回答 3查看 110关注 0票数 0

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

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

我一直在寻找解决方案，并试图使用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链路，我的意图是让所有三个DIV元素在按任何顺序选择时更改顶部文本的颜色，并尽可能使用这些类。

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-05-23 02:51:19

看起来主要的问题是removeClass不支持多个类选择器(比如'onetxt，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')
    });
});

票数 0

Stack Overflow用户

发布于 2022-05-23 04:11:01

没有.removeClass()重载支持多个参数，它只删除第一个类。没有参数的.removeClass()移除所有类。这也许是你需要的。

我稍微修改了一下您的代码，包括：

重命名某个类名。.color-palette是所有颜色选择的容器。.color是个人颜色选择框。
将阿特里布te添加到.color中。该属性将用于示例文本css类分配。
使用单个事件委托处理程序简化单击事件。我试图将add/remove类逻辑与实际的颜色名称解耦。这样，如果要添加更多的颜色框，则不需要复制新的函数集。
定义自定义css属性。例如(--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>

票数 0

Stack Overflow用户

发布于 2022-05-23 04:14:52

这里有一个基于classList.toggle(className: string, force: boolean)的普通DOM解决方案。第二个参数控制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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72330763

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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