Question

我想要实现的目标，我几乎就在那里，用户点击一个复选框，它变为绿色（Checkbox-active class）。但是，我还希望点击元素的文本/内容更改为＆＃34;已激活＆＃34;然后在再次点击或同时点击时恢复原始文本。

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

来源：

Answer 2

 $(document).ready(function() {
    $('.font-size .checkboxes span').each(function(index, element) {
        $(this).data('text', $(this).text());
    });
  });

此代码应基本复制您的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（）使用存储的值。

这是jsfiddle： http://jsfiddle.net/0xvtrLoz/1/

Answer 3

这是我根据您的描述提出的，以帮助您入门。

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

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

3 个答案: