我正在写一个 <input type="number">
与 -
和 +
电子商务购物车的按钮。
每个组的结构是:
- 1x
<button class="minus" data-prod="prod_id_int">
- 1x
<input type="number" id="prod_id_int">
- 1x
<button class="plus" data-prod="prod_id_int">
我现在要做的是禁用按钮 -
如果输入类型编号的值为 < 1
.
为了实现它,根据我的脚本,我必须禁用不是一般的 <button class="minus">
但具体<button class="minus" data-prod="prod_id_int">
.
我试过了
$(buttonClass).data('prod', dataProd).prop('disabled', true);
它实际上阻止了数量为 < 1
但它并没有真正添加属性 disabled
到按钮。那么,我不确定这是正确的方法。有人可以向我解释如何实现它吗?
这里是工作片段
$(document).ready(function() {
$('button').on('click', function() {
var buttonClass = $(this).attr('class');
//console.log(buttonClass);
var buttonID = $(this).attr('id');
//console.log(buttonID);
var dataProd = $(this).data('prod');
var inputToChange = $('#' + dataProd);
var inputToChangeValue = $('#' + dataProd).val();
if (buttonClass == 'minus') {
var newValue = parseInt(inputToChangeValue) - parseInt(1);
if (newValue < 1) {
$(buttonClass).data('prod', dataProd).prop('disabled', true);
//$(buttonClass).data('prod="' + dataProd + '"').prop('disabled', true);
//$(buttonClass + '.[data-prod="' + dataProd + '"]').attr(disabled=disabled); //.prop('disabled', true)
//alert('NOPE');
} else {
$('#' + dataProd).val(newValue);
//console.log(inputToChangeValue);
}
} else if (buttonClass == 'plus') {
var newValue = parseInt(inputToChangeValue) + parseInt(1);
if (newValue > 99) {
alert('NOPPPPEE');
} else {
$('#' + dataProd).val(newValue);
console.log(inputToChangeValue);
}
}
});
});
.plus,
.minus {
width: 1.5%;
height: auto;
background-color: #EF1B1F;
border-radius: 50%;
text-align: center;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="minus" data-prod="23">-</button>
<input type="number" class="qta" id="23" value="5">
<button class="plus" data-prod="23">+</button>
<br>
<button class="minus" data-prod="90">-</button>
<input type="number" class="qta" id="90" value="62">
<button class="plus" data-prod="90">+</button>
最佳答案
这是解决方案。
$('.'+buttonClass).data('prod', dataProd).prop('disabled', true);
您只需将 concatenate
.
符号添加到您的类中即可。
buttonClass
只返回className
,比如minus
,你需要jquery selector
,像这样:$('.minus')
此外,我建议您使用:var newValue = --inputToChangeValue;
作为递减值的简单方法,而不是 var newValue = parseInt(inputToChangeValue) - parseInt(1) ;
$(document).ready(function() {
$('button').on('click', function() {
var buttonClass = $(this).attr('class');
//console.log(buttonClass);
var buttonID = $(this).attr('id');
//console.log(buttonID);
var dataProd = $(this).data('prod');
var inputToChange = $('#' + dataProd);
var inputToChangeValue = $('#' + dataProd).val();
if (buttonClass == 'minus') {
var newValue = --inputToChangeValue;
if (newValue < 1) {
$('.'+buttonClass).filter(function() {
return $(this).data("prod") == dataProd
}).prop('disabled', true);
//$(buttonClass).data('prod="' + dataProd + '"').prop('disabled', true);
//$(buttonClass + '.[data-prod="' + dataProd + '"]').attr(disabled=disabled); //.prop('disabled', true)
//alert('NOPE');
} else {
$('#' + dataProd).val(newValue);
//console.log(inputToChangeValue);
}
} else if (buttonClass == 'plus') {
var newValue = parseInt(inputToChangeValue) + parseInt(1);
$('.minus').filter(function() {
return $(this).data("prod") == dataProd
}).prop('disabled', false);
if (newValue > 99) {
alert('NOPPPPEE');
} else {
$('#' + dataProd).val(newValue);
console.log(inputToChangeValue);
}
}
});
});
.plus,
.minus {
width: 10%;
height: auto;
background-color: #EF1B1F;
border-radius: 50%;
text-align: center;
display: inline-block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="minus" data-prod="23">-</button>
<input type="number" class="qta" id="23" value="5">
<button class="plus" data-prod="23">+</button>
<br>
<button class="minus" data-prod="90">-</button>
<input type="number" class="qta" id="90" value="12">
<button class="plus" data-prod="90">+</button>
关于javascript - 基于类+数据属性的按钮禁用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41444376/