javascript - 检查按钮是否被单击 执行其他操作 不执行任何操作

Question

我创建了一个功能，让用户选择一个时间段并根据所选时间获得折扣，但现在的问题是，当用户选择第一个选项，然后选择第二个选项时，金额会不断被扣除，而不是重新计算原价而不是减价

这是我的工作代码

$(document).ready(function(e) {
	$('.time-slot').on('click', function() {
		$('.time-slot').removeClass('active1');
		$(this).addClass('active1');
		
		var dt_time  	= $(this).attr('data-dt-time');
		var time_off 	= $(this).attr('data-timeoff');
		var cost	 	= $('.price').val();
		
		if(time_off !== undefined) {
			if($('.time-slot').hasClass('active1')) {
				var subtr 	 = parseInt(cost) / 100 * parseInt(time_off);
				var subtotal = parseInt(cost) - subtr;
				$('.price').val(subtotal);
			} else {
				var subtr 	 = parseInt(cost) / 100 * parseInt(time_off);
				var subtotal = parseInt(cost) + subtr;
				$('.price').val(subtotal);
			}
		}
		
	});
});

li {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="time-slot" data-dt-time="08:00" data-timeoff="10">08:00</li>
<li class="time-slot" data-dt-time="08:30" data-timeoff="15">08:30</li>
<li class="time-slot" data-dt-time="09:00" data-timeoff="10">09:00</li>
<li class="time-slot" data-dt-time="09:30" data-timeoff="20">09:30</li>
<li class="time-slot" data-dt-time="10:00" data-timeoff="10">10:00</li>
</ul>

<input type="text" class="price" value="350" />

Answer 1

我得到了你的解决方案，你超越了价格等级的值(value)。我在此使用了新的输入类名称originalPrice。我从originalPrice获取原产地成本价格并将其发送到price并执行您想要的操作

$(document).ready(function(e) {
  $('.time-slot').on('click', function() {
    $('.time-slot').removeClass('active1');
    $(this).addClass('active1');

    var dt_time = $(this).attr('data-dt-time');
    var time_off = $(this).attr('data-timeoff');
    var cost = $('.originalPrice').val();

    if (time_off !== undefined) {
      if ($('.time-slot').hasClass('active1')) {
        var subtr = parseInt(cost) / 100 * parseInt(time_off);
        var subtotal = parseInt(cost) - subtr;
        $('.price').val(subtotal);
      } else {
        var subtr = parseInt(cost) / 100 * parseInt(time_off);
        var subtotal = parseInt(cost) + subtr;
        $('.price').val(subtotal);
      }
    }

  });
});

li {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
  <li class="time-slot" data-dt-time="08:00" data-timeoff="10">08:00</li>
  <li class="time-slot" data-dt-time="08:30" data-timeoff="15">08:30</li>
  <li class="time-slot" data-dt-time="09:00" data-timeoff="10">09:00</li>
  <li class="time-slot" data-dt-time="09:30" data-timeoff="20">09:30</li>
  <li class="time-slot" data-dt-time="10:00" data-timeoff="10">10:00</li>
</ul>

<input type="text" class="originalPrice" value="350" />
<input type="text" class="price" value="350" />