увеличить количество, используя плюс и минус с JQuery не работает

Question

Привет я творю входной номер инкремент с помощью JQuery, но никакого успеха еще не пожалуйста, вы можете проверить свой код и дайте мне надлежащего руководства

SEE THE DEMO HERE

HTML

<div class="sp-quantity"> 
    <div class="sp-minus fff"> <a class="ddd" href="#">-</a></div> 
    <div class="sp-input"> 
     <input type="text" class="quntity-input" value="1"> 
    </div> 
    <div class="sp-plus fff"> <a class="ddd" href="#">+</a></div> 
</div> 

JS

$(".ddd").on("click", function() { 

    var $button = $(this); 
    var oldValue = $button.parent().find("input .quntity-input").val(); 

    if ($button.text() == "+") { 
     var newVal = parseFloat(oldValue) + 1; 
    } else { 
     // Don't allow decrementing below zero 
     if (oldValue > 0) { 
      var newVal = parseFloat(oldValue) - 1; 
     } else { 
      newVal = 0; 
     } 
    } 

    $button.parent().find("input .quntity-input").val(newVal); 

}); 

Answer 1

Селектор для поиска ввод был неправильным. .quntity-input является дочерним элементом .sp-quantity, который находится на двух уровнях над кнопкой в ​​DOM, поэтому вам нужно использовать closest() с селектором, а не parent. Попробуйте это:

$(".ddd").on("click", function() { 

    var $button = $(this); 
    var oldValue = $button.closest('.sp-quantity').find("input.quntity-input").val(); 

    if ($button.text() == "+") { 
     var newVal = parseFloat(oldValue) + 1; 
    } else { 
     // Don't allow decrementing below zero 
     if (oldValue > 0) { 
      var newVal = parseFloat(oldValue) - 1; 
     } else { 
      newVal = 0; 
     } 
    } 

    $button.closest('.sp-quantity').find("input.quntity-input").val(newVal); 

}); 

Example fiddle

Вы также можете упростить код:

$(".ddd").on("click", function() { 
 
    var $button = $(this); 
 
    var $input = $button.closest('.sp-quantity').find("input.quntity-input"); 
 

 
    $input.val(function(i, value) { 
 
    return +value + (1 * +$button.data('multi')); 
 
    }); 
 
});

.sp-quantity div { display: inline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sp-quantity"> 
 
    <div class="sp-minus fff"><a class="ddd" href="#" data-multi="-1">-</a></div> 
 
    <div class="sp-input"> 
 
    <input type="text" class="quntity-input" value="1" /> 
 
    </div> 
 
    <div class="sp-plus fff"><a class="ddd" href="#" data-multi="1">+</a></div> 
 
</div>

Answer 2

Ваш селектор для входа должен быть

$button.closest('.sp-quantity').find("input.quntity-input") 

Демо: Fiddle

Answer 3

Это то, что вы имеете в виду?

Fiddle here

$('.sp-plus').on('click', function(){ 
     var oldVal = $('input').val(); 
     var newVal = (parseInt($('input').val(),10) +1); 
     $('input').val(newVal); 
    }); 

    $('.sp-minus').on('click', function(){ 
     var oldVal = $('input').val(); 
     if (oldVal > 0) 
     { 
      var newVal = (parseInt($('input').val(),10) -1); 
     } 
     else 
     { 
      newVal = 0; 
     } 
     var newVal = (parseInt($('input').val(),10) -1); 
     $('input').val(newVal); 
    });