检查按钮是否被点击做其他什么都不做(check whether the button is clicked do something else do nothing)
我已经为用户创建了一个功能，可以根据选择的时间选择一个时段并获得折扣，但现在的问题是，当用户选择第一个选项然后选择第二个选项时，金额会被扣除，而不是从原始价格重新计算而不是降低价格
这是我的工作代码
$(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" />
I have created a function for users to select a time slot and get discount on the basis of selected time but now the problem is when ever user selects the first and then selects the second option the amount keeps getting deducted instead of recalculating from the original price instead of decremented the price
here is my working code
$(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" />
最满意答案
我得到的解决方案是你压倒价格等级的价值。 我在这里使用了一个新的输入类名originalPrice。 我从originalPrice获得原始成本价格并将其发送到价格并执行您想要的操作
$(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" />
I get your solution you are overriding the value of price class. i used a new input class name originalPrice in this. i get price of origin cost from originalPrice and send it to price and perform your actions what you want
$(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" />
更多推荐
price,选择,class,电脑培训,计算机培训,IT培训"/> <meta name="description&qu
发布评论