Question

创建了以下函数，用于向输入字段添加向上和向下按钮控件。我需要这个功能才能在同一页面上有多个功能的地方工作。

$(document).ready(function() {
    var maxqty = parseInt($('.qty').attr('max'))

    $(".qtyplus").click(function() {
        if($('.qty').val()<maxqty)
            $(":text[name='qty']").val( Number($(":text[name='qty']").val()) + 1 );
    });
    $(".qtyminus").click(function() {
        if($('.qty').val()>1)
            $(":text[name='qty']").val( Number($(":text[name='qty']").val()) - 1 );
    });
});

小提琴在这里：http://jsfiddle.net/BhnM7/

基本上需要功能才能在同一页上有几个div class =“qtybox”

Answer 1

试试这个：

$(document).ready(function() {
    var maxqty = parseInt($('.qty').attr('max'))
    $(".qtyplus").click(function() {
        if($(this).parent().prev('.qty').val()<maxqty)
            $(this).parent().prev(":text[name='qty']").val(
                Number($(this).parent().prev(":text[name='qty']").val()) + 1 );
    });
    $(".qtyminus").click(function() {
       if($(this).parent().prev('.qty').val()>1)
           $(this).parent().prev(":text[name='qty']").val( 
              Number($(this).parent().prev(":text[name='qty']").val()) - 1 );
    });
});

<强> Working Demo

Answer 2

试试这个，如果你真的在寻找一个功能

$(document).ready(function(){
convert("qtyplus", "qtyminus", "qty");

    function convert(plusClass,minusClass,txtBoxClass){
        var maxqty = parseInt($('.'+txtBoxClass).attr('max'));
        $("."+plusClass).click(function(){
     if($('.'+txtBoxClass).val()<maxqty)
     $(':text[name='+txtBoxClass+']').val(Number($(':text[name='+txtBoxClass+']').val()) + 1 );
    });
    $("."+minusClass).click(function(){
        if($('.'+txtBoxClass).val()>1)
      $(':text[name='+txtBoxClass+']').val( Number($(':text[name='+txtBoxClass+']').val()) - 1 );

    });
    }
});

Working Demo：http://jsfiddle.net/hiteshbhilai2010/BhnM7/6/

Answer 3

您可以使用each()功能。

$(document).ready(function () {
    var maxqty = parseInt($('.qty').attr('max'))

    $(".qtyplus").click(function () {
        $('.qty').each(function () {
            var maxqty = parseInt($(this).attr('max'))
            if ($(this).val() < maxqty) {
                $(this).val(Number($(this).val()) + 1);
            }
        });
    });
    $(".qtyminus").click(function () {
        $('.qty').each(function () {
            if ($(this).val() > 1) {
                $(this).val(Number($(this).val()) - 1);
            }
        });
    });
});

jsfiddle：http://jsfiddle.net/BhnM7/7/

Answer 4

无论添加多少parent()，您都可以使用jQuery的siblings()和input函数查找相应的<div>字段。

 $(document).ready(function(){

    $(".qtyplus").click(function(event){
        //Use the jQuery even object to get the button that was just clicked
        //Navigate the DOM tree using parent and siblings functions to find the corresponding input box
        var inputBox = $(event.currentTarget).parent().siblings('.qty')[0];
        var maxqty = parseInt($(inputBox).attr('max'));
        if($(inputBox).val() < maxqty)
             $(inputBox).val( Number($(inputBox).val()) + 1 );
    });

    $(".qtyminus").click(function(event){
        //Use the jQuery even object to get the button that was just clicked
        //Navigate the DOM tree using parent and siblings functions to find the corresponding input box
        var inputBox = $(event.currentTarget).parent().siblings('.qty')[0];
     if($(inputBox).val() > 1)
       $(inputBox).val( Number($(inputBox).val()) -1 );
    });
});

http://jsfiddle.net/smurphy/v9zMK/4/

Answer 5

最好使用事件委派而不是使用each（）。您可以阅读更多相关信息here。

以下是如何操作：

$(document).ready(function(){

    $('#qtybox').on('click', '.qtybtn', function(e){
        var $group = $(this).parents('.qty-group');
        var $input = $('.qty', $group);
        var maxValue = parseInt($input.attr('max'));
        var buttonValue = parseInt($(this).val());
        var newValue = parseInt($input.val()) + buttonValue;
        if (newValue <= maxValue && newValue >= 0) {
            $input.val(newValue);
         }
    });

});

上面的代码将侦听#qtybox类中的一个单击事件，并查找具有.qtybtn类的所有后代。

您可以看到工作副本here。

将jquery函数转换为每个

5 个答案: