基于class + data-attribute的按钮调度

Question

我正在用电子商务购物车的-和+按钮写一个<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> 

Answer 1

这是解决方案。

$('.'+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>