jQuery - 从元素中添加/删除类名并在按钮上切换活动类 [英] jQuery - Adding/removes classnames from the element and togling active class on the button

问题描述

我需要将 .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%;边距:0 自动；}按钮{大纲:0;/* 只是为了删除这个演示中丑陋的蓝色轮廓 */}button.active {颜色:白色；}button.green.active {背景:绿色；}button.red.active {背景:红色；}button.blue.active {背景:蓝色；}.important-element {padding:20px;宽度:240px；文字对齐:居中；背景:灰色；边距顶部:30px;颜色:#FFF;}.important-element.green {背景:绿色}.important-element.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 class="important-element">我需要通过按钮点击更改为与按钮相同的颜色</div>

解决方案

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

$('.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 {宽度:1190px；最大宽度:100%；边距:0 自动；}按钮 {大纲:0；/* 只是为了删除这个演示中丑陋的蓝色轮廓 */}button.active {白颜色;}button.green.active {背景:绿色；}button.red.active {背景:红色；}button.blue.active {背景:蓝色；}.重要元素{填充:20px；宽度:240px；文本对齐:居中；背景:灰色；边距顶部:30px；颜色:#FFF；}.important-element.green {背景:绿色}.important-element.red {背景:红色}.important-element.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 class="important-element">我需要通过按钮点击更改为与按钮相同的颜色</div>

I need to change the .important-element to the same color as the same-name button has been pressed. I want to achieve this by adding .red, .blue, .green classnames to .important-element and also removing them if the other or same button has been pressed. I am not sure how to edit my jQuery code for this to work.

Important thing: upon pressing the button it needs to remove previously added classnames (just like jQuery code works right now with the buttons). In other words: if one button is already active, it needs to remove it added class names from .important-element upon pressing another button.

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

解决方案

So now the code should be right.

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

这篇关于jQuery - 从元素中添加/删除类名并在按钮上切换活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！