2016-05-31 18 views
-1

私はjqueryを初めて使用しています。私は少しのeshopページを操作する必要があります。 +/-をクリックするか手動で入力値を変更する場合は、最も近いaリンクのdata-quantityを更新する必要があります。ここでjquery最新の入力変更時のデータ量を更新

(function($) { 
    function createQTYButtons(target) { 
     // Quantity buttons 
     $(target).find('div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)').addClass('buttons_added').append('<input type="button" value="+" class="plus" />').prepend('<input type="button" value="-" class="minus" />'); 
     // Target quantity inputs on product pages 
     $(target).find('input.qty:not(.product-quantity input.qty)').each(function() { 
      var min = parseFloat($(this).attr('min')); 
      if (min && min > 0 && parseFloat($(this).val()) < min) { 
       $(this).val(min); 
      } 
     }); 
     $(target).on('click', '.plus, .minus', function() { 
      // Get values 
      var $qty = $(this).closest('.quantity').find('.qty'), 
       currentVal = parseFloat($qty.val()), 
       max = parseFloat($qty.attr('max')), 
       min = parseFloat($qty.attr('min')), 
       step = $qty.attr('step'); 
      var $qty_cart = $(this).closest('.text-center').find('.addt_to_cart_button'), 
       qty_cart_val = parseFloat($qty_cart.data("quantity")); 
       console.log(qty_cart_val);   
      // Format values 
      if (!currentVal || currentVal === '' || currentVal === 'NaN') currentVal = 0; 
      if (max === '' || max === 'NaN') max = ''; 
      if (min === '' || min === 'NaN') min = 0; 
      if (step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN') step = 1; 
      // Change the value 
      if ($(this).is('.plus')) { 
       if (max && (max == currentVal || currentVal > max)) { 
        $qty.val(max); 
       } else { 
        $qty.val(currentVal + parseFloat(step)); 
       } 
      } else { 
       if (min && (min == currentVal || currentVal < min)) { 
        $qty.val(min); 
       } else if (currentVal > 0) { 
        $qty.val(currentVal - parseFloat(step)); 
       } 
      } 
      // Trigger change event 
      $qty.trigger('change'); 
     }); 
    } 
    // jQuery plugin. 
    $.fn.addQty = function() { 
     return this.each(function(i, el) { 
      createQTYButtons(el); 
     }); 
    } 
})(jQuery);  
jQuery('.small-product').addQty(); 

はフィドルです: - :私は(一部の商品説明内の)コードの一部を以下している

ボタンをし、クリックされたとき、その最小値と最大値を制御

<div class="small-product"> 

<div class="text-center"> 

    <div class="add-to-cart-button"> 
     <a href="/zeleny/kategorie-produktu/vareni/?removed_item=1&amp;add-to-cart=3854" data-quantity="1" rel="nofollow" data-product_id="3854" class="ajax_add_to_cart add_to_cart_button product_type_simple button alt-button small clearfix">Do košíku</a> 
    </div> 

    <div class="quantity"> 
    <input type="number" step="1" min="1" max="8" name="quantity" value="1" title="Množství" class="input-text qty text" size="4"> 
    </div> 

</div> 
<div class="small-product"> 

<div class="text-center"> 

    <div class="add-to-cart-button"> 
     <a href="/zeleny/kategorie-produktu/vareni/?removed_item=1&amp;add-to-cart=3854" data-quantity="1" rel="nofollow" data-product_id="3854" class="ajax_add_to_cart add_to_cart_button product_type_simple button alt-button small clearfix">Do košíku</a> 
    </div> 

    <div class="quantity"> 
    <input type="number" step="1" min="1" max="13" name="quantity" value="1" title="Množství" class="input-text qty text" size="4"> 
    </div> 


</div> 

このjqueryのは+追加します: https://jsfiddle.net/kybernaut/8aam5861/

事前にどうもありがとう

+1

最近のほとんどのブラウザは自動的に 'タイプ= number'でこれを行います。なぜ自分でこれを行う必要がありますか? – Barmar

答えて

0

はここで、それは誰にも有用であろうあれば答えは、私は解決策を自分で発見した:

$('.qty').bind('change', function() { 
    $(this).closest('.text-center').find('a.ajax_add_to_cart').attr('data-quantity', $(this).val()); 
}); 
関連する問題