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

Question

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

我不能简单的替换掉class，因为同一个class在不同的情况下使用，需要替换成不同的class。

示例更容易显示。

<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，但是根据另一个class换成不同的class，即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 替换为相关的 class？

Answer 1

在那种情况下：

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

target_element 将是唯一的 class，因此它的更改只能应用于该元素，例如：

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

这里一页中只有一个 cancel class。或者使用 # 即 Id 选择器而不是 class 选择器

Answer 2

尝试：

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

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

Answer 3

您可以将函数传递给 .addClass()，该函数必须 return 应该添加的 class。

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 4

您可以将依赖项存储在内部，例如一个对象，然后只引用它，同时使用 button class.

对每个元素进行操作

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 5

尝试以下操作：

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

Select 所有 .button-primary 元素并使用 addClass( function ) 将新的 class 添加到所选元素。在回调函数中添加您的条件和 return 您的目标新 class。添加新 class 后使用 .removeClass()

删除旧 class

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

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

Using jQuery to replace a class that is adjacent to another class

javascript

jquery

conditional

replace

class