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

我正试图实现的，我几乎做到了，就是用户点击一个复选框，它就会变成绿色（复选框活动类）。但是，我还希望单击元素的文本/内容更改为“已激活”，然后在再次单击或在兄弟节点上单击时恢复为原始文本

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

---

第二次尝试：

$（this）.sillides.replaceWith（“已激活”）
这是我根据您的描述提出的，让您开始学习

$('.small').data('text', 'S');
$('.medium').data('text', 'M');
$('.large').data('text', 'XL');

$('.font-size .checkboxes span').click(function () {

    $(this).siblings().removeClass('checkbox-active');
    $.each( $(this).siblings(), function(i, value) {
        $(value).text( $(value).data('text') );
    });

    if ( $(this).hasClass('checkbox-active') ) {
        $(this).text( $(this).data('text') );
    } else {
        $(this).toggleClass('checkbox-active');
        $(this).text('Activated');
    }
});

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


$（'.font-size.checkbox span'）。单击（函数（）{
$（this.toggleClass（'checkbox-active'）；
//获取单击的范围的内容并删除其周围的所有空格（如果有）
var text=$（this.text（）.trim（）；
//如果当前内容（单击前）已“激活”，请将其设置为默认值
//否则，将内容设置为“已激活”；默认内容位于“数据txt”属性中
//使用三元运算符--？：
$（this）.text（text=='Activated'？$（this.data（'txt'）：'Activated'）；
$（this）.sides（）.removeClass（'checkbox-active'）
//将所有同级的内容设置为其默认值（数据txt属性）
.text（函数（）{
返回$（this.data（'txt'）；
});
});
。复选框处于活动状态{
颜色：绿色；
}

字号
s
M
特大号

这段代码基本上应该复制span中的任何文本，并将其保存在jQuery对象中

$('.font-size .checkboxes span').click(function () {
    $(this).toggleClass('checkbox-active');
    $(this).siblings().removeClass('checkbox-active');
    $(this).siblings().each(function(index, element) {
       $(this).text($(this).data('text'));
    });
    //Edit to revert to original if double click.
    if($(this).hasClass('checkbox-active')){
      $(this).text('Activated');
    } else {
      $(this).text($(this).data('text'));
    }
});

这段代码与您的代码几乎相同，唯一的问题是它使用data（）存储的值将其兄弟文本重置为其默认值

以下是JSFIDLE：
检查有关
replace（）
javascript方法的任何文档。顺便说一句，您没有提供有关变量
文本的代码，但是，我还希望文本/内容更改为“已激活”。。这应该由
$（this.sibbines（）.text（text.replace（'active'））完成？那么，
“激活的”
应该从哪里来？“用户单击复选框并将其打开”首先，复选框在哪里@PeterKA我的第二次尝试：$（this.sillides.replaceWith（“已激活”）；您想将什么更改为“已激活”？查看发生了什么。停用时，颜色保持绿色。我将尝试在else语句中添加removeclass，这是我的错误。是的，您可能想要加入$（this.removeClass（'checkbox-active'）；在if语句中。绝对喜欢PeterKA的解决方案。哈，先告诉我+1:）@PeterKA你能评论一下你的代码让我学习吗？我真的很感激：D.数据属性不是html5的特性吗？ie8支持吗？我想我在理解第二条评论时有些问题。我会更加努力：）好的，我现在明白了。为什么要修剪空间？什么空间？
$（this）.text（text=='Activated'？$（this.data（'txt'）：'Activated'）
相当于：
if（text=='Activated'）{$（this）.text（$（this.data（'txt'））；}else{$（this.text（'Activated'）；}
 $(document).ready(function() {
    $('.font-size .checkboxes span').each(function(index, element) {
        $(this).data('text', $(this).text());
    });
  });

$('.font-size .checkboxes span').click(function () {
    $(this).toggleClass('checkbox-active');
    $(this).siblings().removeClass('checkbox-active');
    $(this).siblings().each(function(index, element) {
       $(this).text($(this).data('text'));
    });
    //Edit to revert to original if double click.
    if($(this).hasClass('checkbox-active')){
      $(this).text('Activated');
    } else {
      $(this).text($(this).data('text'));
    }
});