基於類+數據屬性的按鈕不連續性

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>