jQuery - 从元素中添加/删除类名并在按钮上切换活动类

Question

我需要将.important-element 更改为与按下同名按钮相同的颜色。我想通过将.red、.blue、.green 类名添加到.important-element 来实现这一点，如果按下了另一个或相同的按钮，也将它们删除。我不确定如何编辑我的 jQuery 代码以使其正常工作。

重要的事情：按下按钮后，它需要删除以前添加的类名（就像 jQuery 代码现在可以使用按钮一样）。换句话说：如果一个按钮已经处于活动状态，它需要在按下另一个按钮时从.important-element 中删除它添加的类名。

$('.btn').on("click", function() {
  $('button').not(this).removeClass('active');
  $(this).toggleClass('active');
})

.price-filter-container {width: 1190px;max-width:100%;
  margin: 0 auto;}
button {outline: 0; /* only to remove the ugly blue outline in this demo */}
button.active {color: white;}
button.green.active {background:green;}
button.red.active {background:red;}
button.blue.active {background:blue;}

.important-element {padding:20px; width:240px; text-align:center;  background:grey; margin-top:30px; color:#FFF;}
.important-element.green {background:green}
.important-element.red {background:red}
.important-element.blue {background:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
    <button class="btn green">green</button>
    <button class="btn red">red</button>
    <button class="btn blue">blue</button>
</div>

<div class="important-element">i need to change with button click to the same collor as the button</div>

Answer 1

所以现在代码应该是正确的。

$('.btn').on("click", function() {
  var classname = $(this).attr('class');
  var split = classname.split(" ");
  var elementcolor = split[1];
  var colorStack = ['green', 'red', 'blue'];
  $('button').not(this).removeClass('active');
  $(this).toggleClass('active');
  $.each($(colorStack), function(index, value) {
    if ($('.important-element').hasClass(value)) {
      $('.important-element').removeClass(value);
    }
  });
  $('.important-element').addClass(elementcolor);
  $.each($(colorStack), function(index, value) {
    if (!$('button').hasClass('active')) {
      $('.important-element').removeClass(value);
    }
  })
});

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

button {
  outline: 0;
  /* only to remove the ugly blue outline in this demo */
}

button.active {
  color: white;
}

button.green.active {
  background: green;
}

button.red.active {
  background: red;
}

button.blue.active {
  background: blue;
}

.important-element {
  padding: 20px;
  width: 240px;
  text-align: center;
  background: grey;
  margin-top: 30px;
  color: #FFF;
}

.important-element.green {
  background: green
}

.important-element.red {
  background: red
}

.important-element.blue {
  background: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <button class="btn green">green</button>
  <button class="btn red">red</button>
  <button class="btn blue">blue</button>
</div>

<div class="important-element">i need to change with button click to the same collor as the button</div>

Answer 2

稍微简化的版本：

var colors = [ 'red', 'green', 'blue' ];
$('.btn').on("click", function() {
  $(this).siblings('button').removeClass('active');
  $(this).addClass('active');
  var color = [ ...this.classList ].filter((className) => colors.includes(className))[0];
  var otherColors = colors.filter((colorName) => colorName !== color);
  $('.important-element').removeClass(otherColors.join(' ')).toggleClass(color);
})

.price-filter-container {width: 1190px;max-width:100%;
  margin: 0 auto;}
button {outline: 0; /* only to remove the ugly blue outline in this demo */}
button.active {color: white;}
button.green.active {background:green;}
button.red.active {background:red;}
button.blue.active {background:blue;}

.important-element {padding:20px; width:240px; text-align:center;  background:grey; margin-top:30px; color:#FFF;}
.important-element.green {background:green}
.important-element.red {background:red}
.important-element.blue {background:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
    <button class="btn green">green</button>
    <button class="btn red">red</button>
    <button class="btn blue">blue</button>
</div>

<div class="important-element">i need to change with button click to the same collor as the button</div>

如果您喜欢使用data-* attributes，那可能会更容易：

var colors = [ 'red', 'green', 'blue' ];
$('.btn').on("click", function() {
  $(this).siblings('button').removeClass('active');
  $(this).addClass('active');
  var color = this.dataset.color;
  var otherColors = colors.filter((colorName) => colorName !== color);
  $('.important-element').removeClass(otherColors.join(' ')).toggleClass(color);
})

.price-filter-container {width: 1190px;max-width:100%;
  margin: 0 auto;}
button {outline: 0; /* only to remove the ugly blue outline in this demo */}
button.active {color: white;}
button[data-color="green"].active {background:green;}
button[data-color="red"].active {background:red;}
button[data-color="blue"].active {background:blue;}

.important-element {padding:20px; width:240px; text-align:center;  background:grey; margin-top:30px; color:#FFF;}
.important-element.green {background:green}
.important-element.red {background:red}
.important-element.blue {background:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
    <button class="btn" data-color="green">green</button>
    <button class="btn" data-color="red">red</button>
    <button class="btn" data-color="blue">blue</button>
</div>

<div class="important-element">i need to change with button click to the same collor as the button</div>