jQuery

Question

我需要将 .important-element 更改为与按下的同名按钮相同的颜色。我想通过将 .red、.blue、.green class 名称添加到 .important-element 并在按下另一个或相同按钮时删除它们来实现此目的。我不确定如何编辑我的 jQuery 代码才能使其正常工作。

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

$('.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>

jQuery - Adding/removes class 元素中的名称和按钮上的切换活动 class

jQuery - Adding/removes classnames from the element and togling active class on the button

button

toggle