切换时的活动和非活动 div

Question

我正在尝试在用户选择或取消选择值时创建一个选择按钮 onclick 它选择的值，当再次单击时，它会取消选择值并在用户选择 div 时更改文本框的值，它将显示此 div 是选中并更改文本框值，当用户再次单击时，div 将变为非活动状态，文本框的值将再次更改，当所有 div 被选中时，它将累加所有插件值，例如如果它选择 1 文本框的值将是 2 时选择第二个文本框的值将变为 4，依此类推，现在值正在更改，并且 div 正在激活，但是当我们单击具有相同类的所有 div 正在激活和停用时，我无法找出错误我希望你知道我在说什么

$(document).ready(function() {
	$('.js-mc-checkbox', this).on('click', function() {
		$('.js-mc-checkbox').toggleClass('active');
        var old_val = $('.price_addon').val();
        var new_val = old_val + $(this).attr('data-addon');
		$('.price_addon').val(new_val);
	});
});

.active {
   background:#333 !important;
   color:#fff;
}

.js-mc-checkbox {
 background:#f7f7f7;
 width:150px;
 height:40px;
 float:left;
 margin-right:20px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div data-addon="202" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="203" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="204" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<input type="text" name="price_addon" class="price_addon" value="" />

Answer 1

您的代码的问题是您忘记将data-addon 的值和输入值解析为一个数字，并且在按钮停用时忘记将其减去。

这将起作用：

$(document).ready(function() {
  var $boxes = $('.js-mc-checkbox');
  var $input = $('.price_addon');
  var activeClass = 'active';
  var dataAttr = 'data-addon';

  $boxes.on('click', function() {
    var value = parseInt($input.val() || 0);

    $(this).toggleClass(activeClass);

    if($(this).hasClass(activeClass)) {
       value += parseInt($(this).attr(dataAttr));
    } else {
       value -= parseInt($(this).attr(dataAttr));
    };

    $input.val(value);
  });
});

.active {
   background:#333 !important;
   color:#fff;
}

.js-mc-checkbox {
 background:#f7f7f7;
 width:150px;
 height:40px;
 float:left;
 margin-right:20px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div data-addon="202" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="203" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<div data-addon="204" class=" js-mc-checkbox add-on-item">
  <div class="meta">
				<span class="price add-on-price-202">$35</span>
        <span class="included">Included</span>
  </div>
</div>

<input type="text" name="price_addon" class="price_addon" value="" />