使用 jQuery 替换与另一个类相邻的类

Question

我正在尝试使用 jQuery 替换与另一个类相邻的类。

我不能简单地替换类，因为在不同的情况下使用相同的类，我需要用不同的类替换它们。

一个例子更容易展示。

<div class="cancel button button-primary>
<div class="next button button-primary>
<div class="prev button button-primary>
<div class="send button button-primary>

我需要替换的是button-primary，但是根据另一个类替换为不同的类，即cancel、next、prev和send。

结果应该是：

<div class="cancel button button-red>
<div class="next button button-blue>
<div class="prev button button-grey>
<div class="send button button-green>

如果我使用此代码：

jQuery('.target_element').removeClass('button-primary').addClass('button-red');

它会将button-primary 的所有实例替换为button-red。这不是目标。

如何设置一个条件脚本，将button-primary 替换为相关类？

Answer 1

尝试以下方法：

$('div.button').each(function(){
  if($(this).hasClass('cancel')){
    $(this).removeClass('button-primary')
    $(this).addClass('button-red')
  }
  else if($(this).hasClass('next')){
    $(this).removeClass('button-primary')
    $(this).addClass('button-blue')
  }
  else if($(this).hasClass('prev')){
    $(this).removeClass('button-primary')
    $(this).addClass('button-grey')
  }
  else if($(this).hasClass('send')){
    $(this).removeClass('button-primary')
    $(this).addClass('button-green')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cancel button button-primary">
<div class="next button button-primary">
<div class="prev button button-primary">
<div class="send button button-primary">

Answer 2

在这种情况下：

jQuery('.target_element').removeClass('button-primary').addClass('button-red');

target_element 将是一个独特的类，因此它的更改只能应用于该元素，例如：

jQuery('.cancel').removeClass('button-primary').addClass('button-red');

这里只有一个cancel 类出现在页面中。或者使用 # 即 Id 选择器而不是类选择器

Answer 3

尝试：

$('.button').removeClass('button-primary');
$('.cancel').addClass('button-red');
$('.next').addClass('button-blue');
$('.prev').addClass('button-grey');
$('.send').addClass('button-green');

这可能是最短的方法，除非你有更多这样的情况，那么你可以设置一个组合数组并使用循环。

Answer 4

您可以将一个函数传递给.addClass()，该函数必须返回应添加的类。

var mapping = {
  "cancel": "red",
  "next": "blue",
  "prev": "grey",
  "send": "green"
};
  
$(".button-primary")
  .addClass(function(_, classes) {
      var relevantClass = classes.split(" ").shift();
      return mapping[relevantClass] || "";
    })
  .removeClass("button-primary");

.button-primary { font-style: italic }
.red { color: red }
.blue { color: blue }
.grey { color: grey }
.green { color: green }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cancel button button-primary">cancel</div>
<div class="next button button-primary">next</div>
<div class="prev button button-primary">prev</div>
<div class="send button button-primary">send</div>

Answer 5

您可以将依赖项存储在其中，例如一个对象，然后只引用它，同时使用 button 类对每个元素进行操作。

var elems = document.getElementsByClassName('button'),
    obj = {cancel: 'button-red', next: 'button-blue', prev: 'button-grey', send: 'button-green'};
    
    Object.keys(obj).forEach(function(v) {
      var elem = document.querySelector("." + v);
      elem.classList.remove('button-primary');
      elem.classList.add(obj[v]);
    })
    
    console.log(Array.from(elems));

<div class="cancel button button-primary">
<div class="next button button-primary">
<div class="prev button button-primary">
<div class="send button button-primary">

Answer 6

选择所有.button-primary 元素并使用addClass( function ) 将新类添加到选定元素。在回调函数中添加您的条件并返回您的目标新类。添加新类后使用.removeClass()删除旧类

$(".button-primary").addClass(function(){
  if ($(this).hasClass("cancel"))
    return "button-red";
  else if ($(this).hasClass("next"))
    return "button-blue";
  else if ($(this).hasClass("prev"))
    return "button-gray";
  else if ($(this).hasClass("send"))
    return "button-green";
}).removeClass("button-primary");

.button-red {color: red}
.button-blue {color: blue}
.button-gray {color: gray}
.button-green {color: green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cancel button button-primary">cancel</div>
<div class="next button button-primary">next</div>
<div class="prev button button-primary">prev</div>
<div class="send button button-primary">send</div>