I'm trying to build a product configurator that shows the total weight of all selections.
I've noticed on IOS and phones the #2 button need to be clicked multiple time before registering and the #1 button a couple of times. I've added cursor:pointer but the problem remains.
Is this just the nature of Jquery and mobile touch/tap? If you can see any issues with the code or have any suggestions please let me know.
https://jsfiddle.net/pdrj5vmo/9/
// Matches and shows Butts to Car index order.
let $cars = $('.car');
$('.butts').on('click', e => {
let $target = $cars.eq($(e.target).index()).show();
$cars.not($target).hide();
});
// Finds all Butts and calls `sumBoxes` onclick
const boxes = document.getElementsByClassName("butts");
for (let butts of boxes){ butts.addEventListener("click", sumBoxes); }
// sumBox Calculates each visible Box
function sumBoxes(event) {
var total = 0;
$('.box:visible').each(function() {
total += parseInt($(this).text());
});
$('.sum').html("Total : " + total); // Replaces contents of `.sum`
}body {background: #eeeeee;}
.car {display:none;}
.box {float: left;font: bold 17px arial;text-align: center;margin: 10px 10px 20px 0;padding: 10px 25.54px;background: #fff;color: blue}
.butts {cursor:pointer; width:200px;height:40px;background:#fff; margin-bottom:10px; margin-right:10px; float:left;border:1px solid blue;}
.sum {clear:both;margin-top:40px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="butts-container" style="float: left;width: 100%;">
<div class="butts">1</div>
<div class="butts">2</div>
</div>
<div class="car-container">
<div class="car">
<div class="box">1 CarBox</div>
</div>
<div class="car">
<div class="box">2 CarBox</div>
</div>
</div>
<div class="box">100 Box</div>
<div class="sum">Total</div>