Jquery 内容替换在我的函数中不起作用

Question

我想要实现的目标，而且我已经接近目标，是用户单击一个复选框，它会变成绿色(复选框事件类)。但是，我还希望单击的元素的文本/内容更改为“已激活”，然后在再次单击或单击同级元素时恢复为原始文本。

     $(this).siblings().text(text.replace('active')); 

上面的代码似乎失败了。为什么？

我的 HTML 结构

  <div class="edit-area-right">
    <div class="font-size">
      <h3>Font Size</h3>
      <div class="checkboxes"> <span class="small">S</span> <span class="medium">M</span> <span class="large">XL</span> </div>
    </div>

我的自定义 JavaScript

$('.font-size .checkboxes span').click(function () {
    $(this).toggleClass('checkbox-active');
     $(this).siblings().removeClass('checkbox-active');
     $(this).siblings().text(text.replace('activated')); 
});

第二次尝试:$(this).siblings.replaceWith( "activated");

Answer 1

使用数据属性来保存每个 span 元素的原始内容的副本。每次单击都应从该属性中读取并替换所有同级的跨度内容。第二次单击同一范围应从属性中读取并替换范围的内容，如下所示:

$('.font-size .checkboxes span').click(function() {
  $(this).toggleClass('checkbox-active');
  
  //Get content of clicked span and remove any spaces around it, if any
  var text = $(this).text().trim();
  
  //If current content (before click) is 'Activated' set to default value
  //Otherwise set content to 'Activated'; default content is in `data-txt` attribute
  //Using the ternary operator -- ?:
  $(this).text( text === 'Activated' ? $(this).data('txt') : 'Activated' );
  
  $(this).siblings().removeClass('checkbox-active')
  
  //Set content of all siblings to their default ( data-txt attribute ) values
  .text(function() {
    return $(this).data('txt');
  });
});

.checkbox-active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-area-right">
  <div class="font-size">
    <h3>Font Size</h3>
    <div class="checkboxes">
      <span data-txt="S" class="small">S</span> 
      <span data-txt="M" class="medium">M</span> 
      <span data-txt="XL" class="large">XL</span> 
    </div>
  </div>

来源:

1. Ternary Operator
2. jQuery.data() | jQuery API Documentation
3. .text() | jQuery API Documentation