时间戳

首页 > 解决方案 > 如何在多个班级（超过2个）之间切换？

jquery - 如何在多个班级（超过2个）之间切换？

问题描述

我将尝试解释我想要做什么。如果班级超过2个，如何在多个班级之间切换？当我单击彩色按钮时，将添加/交换容器颜色类。当我单击白色按钮时，它会删除容器颜色类。

这是一个 JSFiddle 示例，以便更好地理解：https ://jsfiddle.net/bwd86h4e/1/

我希望有人能帮忙。谢谢。

HTML：

<div class="buttons">
  <div class="btn btn-reset"></div>
  <div class="btn btn-red"></div>
  <div class="btn btn-green"></div>
  <div class="btn btn-yellow"></div>
</div>

<div class="container">
  When I click on the colored buttons above, then container color class will exchanged. When I click on the white button, then it removes container color class. How to do it?
</div>

CSS：

/* Buttons */
.btn {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 3px;
  cursor: pointer;
  border: 2px solid #333;
}
.btn.btn-red { background-color: red; }
.btn.btn-green { background-color: green; }
.btn.btn-yellow { background-color: yellow; }

/* Container */
.container {
  max-width: 480px;
  margin-top: 20px;
  padding: 40px;
  border: 2px solid #333;
}

/* Container color classes */
.container.cont-red { background-color: red; }
.container.cont-green { background-color: green; }
.container.cont-yellow { background-color: yellow; }

标签： jqueryhtmlcss

解决方案

你使用 jQuery：

$('.btn').click(function()
{
    var color = $(this).attr('data-class');
    //check to see if el has class btn-reset
    if ($(this).hasClass('btn-reset')) {
        $('.container').attr('class', 'container')
    } else {
        $('.container').attr('class', 'container cont-'+ class)
    }
})

并且您的 html 更改为：

<div class="buttons">
  <div class="btn btn-reset" data-class="reset"></div>
  <div class="btn btn-red" data-class="red"></div>
  <div class="btn btn-green" data-class="green"></div>
  <div class="btn btn-yellow" data-class="yellow"></div>
</div>

参考：

https://api.jquery.com/attr/

https://api.jquery.com/addClass/

https://api.jquery.com/hasClass/

jsFiddle：https ://jsfiddle.net/fkopmjyx/

推荐阅读