我尝试为输入类型编号创建一个事件。它在购物篮页面上,如果用户单击“向上”按钮,则还必须更改价格和向下按钮。如果它只是购物篮中的一项,它会很好地工作。但是,如果它等于或大于2,则说明它不是必须要做的。
$("input[type=number]").bind('keyup input', function() {
var wrapper = $(this).closest(".quantety");
var quantety = wrapper.find('.inputQuantity').val();
alert("quantety = " + quantety + " quantetyNumber = " + quantatyNumber);
if (quantety > quantatyNumber) {
quantatyNumber = quantatyNumber + 1;
var summaplus = wrapper.find('.inputQuantity').attr('id');
var totalPlus = wrapper.find('.penger').text();
totalPlus = parseInt(totalPlus);
summaplus = parseInt(summaplus);
var total = totalPlus + summaplus;
$('.penger').text(total);
var summaUp = $('.summa').text();
summaUp = parseInt(summaUp);
var Plus = summaUp + summaplus;
$('.Geld').text(Plus);
$('.summa').text(Plus);
} else if (quantety < quantatyNumber) {
alert('Test-2');
quantatyNumber = quantatyNumber - 1;
//var wrapper = $(this).closest(".basDiv");
var summaminus = wrapper.find('.inputQuantity').attr('id');
var totalMinus = wrapper.find('.penger').text();
totalMinus = parseInt(totalMinus);
summaminus = parseInt(summaminus);
var Minus = totalMinus - summaminus;
$('.penger').text(Minus);
//
var summaDown = $('.summa').text();
summaDown = parseInt(summaDown);
var total = summaDown - summaminus;
$('.Geld').text(total);
$('.summa').text(total);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='basketmain'><br>
<h2>Varorkorg</h2>
<div class='basDiv'>
<img src='img/4.jpg' class='basIMG' alt='Taklampa Arma' />
<div class='ProductName'>
<p class='Pname'>Taklampa Arma</p>
</div>
<div class='itemLink'><a href='#' class='ProductLink'>Taklampa Arma</a>
</div>
<div class='quantety'>
<input type='number' class='inputQuantity' id='254' value='1' min='1' />
</div>
<div class='ProductPrice'>Pris: <span class='penger'>254</span> kr
</div>
<div class='removeItem'><img src='img/remove.png' class='removeItemImg' alt='Radera'>
</div>
</div>
<div class='basDiv'>
<img src='img/5.jpg' class='basIMG' alt='Taklampa Igor'>
<div class='ProductName'>
<P class='Pname'>Taklampa Igor</p>
</div>
<div class='itemLink'><a href='#' class='ProductLink'>Taklampa Igor</a>
</div>
<div class='quantety'>
<input type='number' class='inputQuantity' id='123' value='1' min='1' />
</div>
<div class='ProductPrice'>Pris: <span class='penger'>123</span> kr
</div>
<div class='removeItem'><img src='img/remove.png' class='removeItemImg' alt='Radera'>
</div>
</div>
<div class="DivSumma">
<div class="PayButton">
<form action="" method="POST">
<input type="submit" value="Betala" id="PayItem" />
</form>
</div>
<div class="TotalSumma">Att Betala <span class="summa">377</span> kr
</div>
</div>
</div>
变量quantumyNumber是全局的,以查看点击输入的值是否更大。是否可以通过简单的方法解决我的问题?
我的标头中有一个类为'.Geld'的div块。
答案 0 :(得分:0)
我不会再提出一个询问。现在,我将输入类型编号更改为输入类型文本,并添加了两个图像,并为单击功能上的每个图像创建了两个功能。看代码。
$('.qantetyImgPlus').on('click', function(){
var wrapper = $(this).closest(".basDiv");
quantety = wrapper.find('.inputQuantity').val();
quantety = parseInt(quantety);
if(quantety >= 1){
var quantatyNumber = quantety + 1;
$('.inputQuantity').val(quantatyNumber);
alert("quantety = " + quantety + " quantetyNumber = "+ quantatyNumber);
var summaplus = wrapper.find('.inputQuantity').attr('id');
var totalPlus = wrapper.find('.pengerpenger').text();
alert('pengerpenger = '+ totalPlus);
totalPlus = parseInt(totalPlus);
summaplus = parseInt(summaplus);
alert(totalPlus + " " + summaplus);
var total = totalPlus + summaplus;
alert(total);
wrapper.filters('.pengerpenger').text(total);
var summaUp = $('.summa').text();
summaUp = parseInt(summaUp);
var Plus = summaUp + summaplus;
$('.Geld').text(Plus);
$('.summa').text(Plus);
}else{
$('.inputQuantity').val(1);
}
});
$('.qantetyImgMinus').on('click', function(){
var wrapperMinus = $(this).closest(".basDiv");
quantetyMinus = wrapperMinus.find('.inputQuantity').val();
alert('test');
if(quantetyMinus >= 2){
var quantatyNumber = quantetyMinus - 1;
$('.inputQuantity').val(quantatyNumber);
var summaminus = wrapperMinus.find('.inputQuantity').attr('id');
var totalMinus = wrapperMinus.find('.pengerpenger').text();
totalMinus = parseInt(totalMinus);
summaminus = parseInt(summaminus);
var Minus = totalMinus - summaminus;
alert(Minus);
wrapperMinus.filter('.pengerpenger').text(Minus);
//
var summaDown = $('.summa').text();
summaDown = parseInt(summaDown);
var total = summaDown - summaminus;
$('.Geld').text(total);
$('.summa').text(total);
}else if(quantetyMinus === 1){
$('.inputQuantity').val(1);
}
});
但是现在,如果我单击Plus图像,它可以很好地工作,它可以更改总价,但是它会更改类名称为“ pengerpenger”的所有跨度的价格,而我只需要在同一div块中使用类名称为“ basDiv”的它会更改所有输入框的值。
答案 1 :(得分:0)
如果相同的身体需要代码则固定
$('.qantetyImgPlus').on('click', function(){
var wrapper = $(this).closest(".basDiv");
quantety = wrapper.find('.inputQuantity').val();
quantety = parseInt(quantety);
if(quantety >= 1){
var quantatyNumber = quantety + 1;
wrapper.find('.inputQuantity').val(quantatyNumber);
var summaplus = wrapper.find('.inputQuantity').attr('id');
var totalPlus = wrapper.find('.pengerpenger').text();
totalPlus = parseInt(totalPlus);
summaplus = parseInt(summaplus);
var total = totalPlus + summaplus;
wrapper.find('.pengerpenger').text(total);
var summaUp = $('.summa').text();
summaUp = parseInt(summaUp);
var Plus = summaUp + summaplus;
$('.Geld').text(Plus);
$('.summa').text(Plus);
}
});
$('.qantetyImgMinus').on('click', function(){
var wrapperMinus = $(this).closest(".basDiv");
quantetyMinus = wrapperMinus.find('.inputQuantity').val();
quantetyMinus = parseInt(quantetyMinus);
if(quantetyMinus >= 2){
var quantatyNumber = quantetyMinus - 1;
wrapperMinus.find('.inputQuantity').val(quantatyNumber);
var summaminus = wrapperMinus.find('.inputQuantity').attr('id');
var totalMinus = wrapperMinus.find('.pengerpenger').text();
totalMinus = parseInt(totalMinus);
summaminus = parseInt(summaminus);
var Minus = totalMinus - summaminus;
wrapperMinus.find('.pengerpenger').text(Minus);
//
var summaDown = $('.summa').text();
summaDown = parseInt(summaDown);
var total = summaDown - summaminus;
$('.Geld').text(total);
$('.summa').text(total);
}else if(quantetyMinus === 1){
}
});