jquery each（）函数不在输入字段上工作

时间：2015-05-09 05:02:17

标签： javascript jquery html

我有一个购物车选项，增加了产品选项。该选项具有文本输入和加/减选项

标记

<td class="cart-item-qty">
    <div class="quantity-mius">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

there is about 5 to 6 types of input like above

和JavaScript代码：

var minus = $(".quantity-mius");
var plus = $(".quantity-plus");
var itemValue = $(".cart-main-product-qty");

$(".cart-item-qty").each(function(index) {
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment();
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement();
    });
});

function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

当我按下加号按钮时，输入值会在所有输入中增加，当减去时，所有输入值都会减少。

8 个答案:

答案 0 :(得分：1)

Onclick icon只需调用该函数并在该类中找到sibling并计算该值。试试 - 

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment($(this));
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement($(this));
});

function increment($this){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    itemValue = $this.siblings('.cart-main-product-qty');
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }
};

答案 1 :(得分：0)

为什么不尝试这样

$(".quantity-plus").on('click', function(e){
    e.preventDefault();
    increment();
});
$(".quantity-mius").on('click', function(e){
    e.preventDefault();
    decrement();
});

它会起作用

答案 2 :(得分：0)

在increment和decrement中，您一次选择所有输入元素（选择发生在脚本顶部的each调用之外）。

因此，您尝试在整个输入集合上调用val()和val(n)，这会影响尝试一次增加和减少所有输入，除了在现实中val()（与没有参数）不能像那样工作（它不应该与输入上的集合一起使用，而是一次只使用一个输入）。

您应该使用find中的+选择输入，就像使用-和increment按钮一样，并将找到的输入传递给decrement和{{1作为这些函数的参数，或者你应该在each块本身而不是单独的函数中内联递增或递减。

答案 3 :(得分：0)

这有效：manage click event在选择每个input

之前 
<script type="text/javascript">

var itemValue = $(".cart-main-product-qty");

$( ".quantity-mius" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {

        console.log('decrement');
        decrement();
    })    
});

$( ".quantity-plus" ).click(function(e) {
    e.preventDefault();
  $( ".cart-main-product-qty" ).each(function( index, element ) {

         console.log('increment');
        increment();
    })
  });


function increment(){
    newValue = itemValue.val(); 
    newValue++;
    itemValue.val(newValue);
};

function decrement(){
    newValue = itemValue.val();
    newValue--;
    if(newValue < 1){
        itemValue.val(0);
    }else{
        itemValue.val(newValue);
    }


};

</script>

答案 4 :(得分：0)

您必须仅定位与点击的input按钮相关的plus/minus元素，以便

$(".cart-item-qty .quantity-mius").click(function(index) {
  $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) {
    var value = +val || 0;
    return value > 1 ? value - 1 : 0
  })
});
$(".cart-item-qty .quantity-plus").click(function(index) {
  $(this).closest('td').find('.cart-main-product-qty').val(function(i, val) {
    return +val + 1 || 1;
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
      <div class="quantity-mius">-</div>
      <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
      </div>
      <div class="quantity-plus">+</div>
    </td>
  </tr>
</table>

答案 5 :(得分：0)

这有效：

$(document).ready(function(){
    var minus = $(".quantity-mius");
    var plus = $(".quantity-plus");

        $(plus).on('click', function(e){
            e.preventDefault(); 
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())+1);
        });
        $(minus).on('click', function(e){
            e.preventDefault();
            $(this).parent().find("input.cart-main-product-qty").val(parseInt($(this).parent().find("input.cart-main-product-qty").val())-1);
        });
});

FIDDLE

答案 6 :(得分：0)

你说你在页面上有更多其中一个。那是因为购物车中有多个商品吗？我在容器元素中添加了data-属性。只是一个想法。它可能有助于区分它们。

<td class="cart-item-qty" data-cartItemId="3">
    <div class="quantity-minus">-</div>
    <div class="quantity">
        <input type="text" class="cart-main-product-qty" value="1" />
    </div>
    <div class="quantity-plus">+</div>
</td>

您在increment和decrement函数中投放的网络过于宽泛。您需要在itemValue plus minus内查找$(this)和foreach的方式on。您需要传递单个元素。

如果你检查jQuery上的文档，有一种规定的方法可以将变量传递给var minus = $(".quantity-minus"); var plus = $(".quantity-plus"); var itemValue = $(".cart-main-product-qty"); $(".cart-item-qty").each(function(index) { // need to use THIS this in a nested context. var that = $(this); $(this).find(plus).on('click', { target: that.find(itemValue) }, increment); $(this).find(minus).on('click', { target: that.find(itemValue) }, decrement); }); function increment(event) { event.preventDefault(); var el = event.data.target; newValue = el.val(); newValue++; el.val(newValue); }; function decrement(event) { event.preventDefault(); var el = event.data.target; newValue = el.val(); newValue--; if(newValue < 1){ el.val(0); }else{ el.val(newValue); } }; 调用的事件处理程序。 jQuery API docs

试试这个：

69.144.176.174 - - [08/May/2015:21:58:36 -0700] "GET / HTTP/1.1" 404 25 -     "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/600.3.18 (KHTML, like Gecko) Version/8.0.3 Safari/600.3.18" "www.thepigflys.com" ms=4 cpu_ms=1 cpm_usd=0.000003 app_engine_release=1.9.20 instance=00c61b117c90740883746d46c9e3c98da627ce15<

希望这有帮助！

答案 7 :(得分：0)

您的代码看起来几乎正确。 首先更改此代码

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

当你使用find时你不需要该对象。 然后html没有完成，我用这段代码使它工作

<table>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1">
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
  <tr>
    <td class="cart-item-qty">
        <div class="quantity-mius">-</div>
        <div class="quantity">
            <input type="text" class="cart-main-product-qty" value="1" >
        </div>
        <div class="quantity-plus">+</div>
    </td>
  </tr>
</table>

虽然js是

var minus = ".quantity-mius";
var plus = ".quantity-plus";
var itemValue = ".cart-main-product-qty";

$(".cart-item-qty").each(function(index) {
    var outer = $(this)
    $(this).find(plus).on('click', function(e){
        e.preventDefault();
        increment(outer.find(itemValue));
    });
    $(this).find(minus).on('click', function(e){
        e.preventDefault();
        decrement(outer.find(itemValue));
    });
});

function increment(item){
    newValue = item.val();
    newValue++;
    item.val(newValue);
};

function decrement(item){
    newValue = item.val();
    newValue--;
    if(newValue < 1){
        item.val(0);
    }else{
        item.val(newValue);
    }
};

请注意，我在函数增量和减量中添加了一个参数，因为我想你只想改变相对输入字段

相关问题
最新问题