Question

我根据电子商务网站中的大量因素设置了一些数字字段。我想要一个选项，如果单击一个无线电选项，将清除这些数字，但如果单击一个不同的无线电选项，则返回到之前的数字。我有以下代码将值设置为0，但我不知道如何继续设置它们。我的值是在几个不同的地方定义的，所以我不能轻易地引用它们，但有没有办法在它们被设置为0之前读取字段，然后将它们设置回以前的状态？

$('input[type="radio"]').click(function() {
  if($(this).attr('id') == 'yes-option') { 
  $('#option1').val('0');
  $('#option2').val('0');
  $('#option3').val('0');
  $('#option4').val('0');
}
else if($(this).attr('id') == 'no-option') {
???
}

Answer 1

您可以使用 data-attributes 来存储以前输入/选择的值：

.zshrc

Answer 2

一种可能的方法是始终保持您的选择＆＃39;数组中的先前状态。

var previousStates = [];

$('input[type="radio"]').click(function() {
  if($(this).attr('id') == 'yes-option') { 
    $.saveState(); //Save the current state before changing values
    $( "option" ).each(function( index ) {
        $(this).val('0');
    });
  }
  else if($(this).attr('id') == 'no-option') {
    $.restoreState();
  }
});

$.saveState = function() {
  previousStates = []; //Empty the array
  $( "option" ).each(function( index ) {
      previousStates[index] = $(this).val();
  });
}

$.restoreState = function() {
  $( "option" ).each(function( index ) {
      $(this).val(previousStates[index]);
  });
}

注意：由于此方法使用索引来标识选项，因此在需要动态添加或删除选项时要小心！

Answer 3

使用data-attributes存储旧值，以便稍后阅读。

最好使用循环来遍历每个元素，因此每次添加新的输入字段时都不需要修改它。您也可以将选择器更改为$('input')或任何符合您需求的选项。

$('input[type="radio"]').click(function() {
    if($(this).attr('id') == 'yes-option') { 
      	$('[id^="option"]').each(function(){
            $(this).data('oldval', $(this).val());
            $(this).val(0);
        });
    }
    else if($(this).attr('id') == 'no-option') {
        $('[id^="option"]').each(function(){
            $(this).val($(this).data('oldval'));
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input name="clr" type="radio" id="yes-option">
  <span>YES</span>
</label>

<label>
  <input name="clr" type="radio" id="no-option">
  <span>NO</span>
</label>

<div>
  <input type="number" id="option1" value="15">
</div>
<div>
  <input type="number" id="option2" value="23">
</div>
<div>
  <input type="number" id="option3" value="100">
</div>
<div>
  <input type="number" id="option4" value="86">
</div>

读取字段值，记住它，更改字段，然后返回到先前的状态

3 个答案: