so far i tried to achieve what i what by using
Prob();
but it doesn't work correctly . I don't maybe there's something wrong in my logic or my script code ..
what I did is when the value is equal to 0 then disable the span tag . so the user can't click the minus span tag . he can only click the plus span tag for quantity .. and everything is good till now ..
but the problem is once the minus span tag get disabled..
it cant turn back to enable anymore.. even the quantity is not 0, the span tag still disable
and I already use IF ELSE Statement but it seems the else statement it doesn't work..
can someone help on this ..
$(document).on('click','.plus',function(){
$(this).closest('.content').find('.count').val(parseInt($(this).closest('.content').find('.count').val()) + 1 );
});
$(document).on('click','.minus',function(){ $(this).closest('.content').find('.count').val(parseInt($(this).closest('.content').find('.count').val()) - 1 );
if ($(this).closest('.content').find('.count').val() == 0) {
$(this).closest('.content').find('.count').val(0);
$(this).closest('.minus').prop('disabled', true);
}else{
$(this).closest('.minus').prop('disabled', false);
}
});.gallery{
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: center;
margin: 0;
}
.qty{
padding-bottom: 15px;
}
.qty .count {
border: 1px solid #e1ecfb;
color: #000;
display: inline-block;
vertical-align: top;
font-size: 15px;
font-weight: 450;
padding: 0 0;
width: 35px;
text-align: center;
}
.qty .plus {
cursor: pointer;
display: inline-block;
vertical-align: top;
color: white;
background-color: #cee0f9;
width: 25px;
height: 25px;
font: 25px/1 Arial,sans-serif;
text-align: center;
border-radius: 30%;
}
.qty .minus {
cursor: pointer;
display: inline-block;
vertical-align: top;
color: #ffffff;
background-color: #cee0f9;
width: 25px;
height: 25px;
font: 23px/1 Arial,sans-serif;
text-align: center;
border-radius: 30%;
background-clip: padding-box;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<title>Document</title>
</head>
<body>
<div class="produk_list">
<div class="container-fluid" style="padding-bottom:50px;">
<div class="row data_produk" id="data_produk" style="text-align: center;">
<div class="col-6 gallery" value="1">
<div class="content">
<img src="https://awsimages.detik.net.id/community/media/visual/2021/04/06/sandwich-keju-tomat-dan-alpukat-1_43.jpeg?w=700&q=90" width="150" height="150">
<h6>Product Name</h6>
<h6>Product Price</h6>
<div class="qty" id="qty">
<span class=" btn-primary minus b-dark">-</span>
<input type="number" class="count" name="qty" value="1">
<span class="plus b-dark">+</span>
</div>
<button class="buy-1 btn-button" id="pesan"><i class="fas fa-cart-plus"></i></button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire