Question

在此示例中，我尝试通过选择span来增加option的值，但如果更改选项，我希望减少当前值。

$('select').change(function() {
  var span = +$('span').text();
  var val = +$(this).find('option:selected').attr('data-val');
  var nextNumber = Math.abs(span + val);
  $('span').text(nextNumber);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option data-val="15">Item 1</option>
  <option data-val="25">Item 2</option>
  <option data-val="10">Item 3</option>
</select>

<span>150</span>

例如，您选择第3项，范围文本将设置为160，对吗？现在想要更改此选项，选择项目1，它将设置为175，但我想增加新值，它应该是165.我想减少之前的值，只需按新选择的选项增加。

另一个例子，如果您选择第1项，则范围值应为 165 ，如果是第2项， 175 ，则为第3项， 160

目标：仅按所选选项增加span文字，然后删除/减少之前的值。

这是我到目前为止所做的，但不知道减少以前的价值，任何想法。谢谢你的进步。

Answer 1

你只需要在某处保留跨度的初始值：

$('select').change(function() {
  var span = +$('span').attr('data-initial-val');
  var val = +$(this).find('option:selected').attr('data-val');
  var nextNumber = Math.abs(span + val);
  $('span').text(nextNumber);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option data-val="15">Item 1</option>
  <option data-val="25">Item 2</option>
  <option data-val="10">Item 3</option>
</select>

<span data-initial-val="150">150</span>

如果是另一个输入，则更改范围文本：

$('select').change(function() {
  var span = +$('span').attr('data-initial-value');
  var val = +$(this).find('option:selected').attr('data-val');
  var nextNumber = Math.abs(span + val);
  $('span').text(nextNumber);
});

$('input[type="checkbox"]').click(function() {
  var span = +  $('span').attr('data-initial-value');
  var val = +$(this).val();
  var selecNumber = +$('select').find('option:selected').attr('data-val');
  if ($(this).prop('checked') === true) {
    var nextNumber = Math.abs(span + val);
    $('span').text(nextNumber + selecNumber);
      $('span').attr('data-initial-value', nextNumber);
  } else {
    var nextNumber = Math.abs(span - val);
     $('span').attr('data-initial-value', nextNumber);
     $('span').text(nextNumber + selecNumber);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option data-val="15">Item 1</option>
<option data-val="25">Item 2</option>
<option data-val="10">Item 3</option>
</select>

<span data-initial-value="150">150</span>


<input type="checkbox" value="22" />
<input type="checkbox" value="25" />
<input type="checkbox" value="5" />

减少变化的价值

1 个答案: