基于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);

＆＃13;

＆＃13;

$(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);
      }
    }
  });

});

＆＃13;

.plus,
.minus {
  width: 10%;
  height: auto;
  background-color: #EF1B1F;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;