Question

我是Jquery和Javascript的新手。我只为codeacademy完成了这个介绍，并且我记得我在python时代所记得的。

我看到了这个教程： http://www.codecademy.com/courses/a-simple-counter/0/1

我完成了教程并思考：＆＃34;我应该学习如何使用Jquery＆＃34;来完成这项工作。所以我一直试图用我理解的方式来做到这一点。我的问题是我不知道如何将变量的参数从HTML传递给Jquery（javascript）。

这是我的代码：
的 HTML

<body>

<label for="qty">Quantity</label>
<input id="qty" type = "number" value = 0 />
<button class = "botton">-1</button>
<button class = "botton">+1</button>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>

Jquery的/使用Javascript：

//create a function that adds or subtracts based on the button pressed

function modify_qty(x) {
    //on click add or subtract
    $('.botton').click(function(){
        //get the value of input field id-'qty'
        var qty = $('#qty').val();

        var new_qty = qty + x;

        //i don't want to go below 0
        if (new_qty < 0) {
                new_qty = 0;
        }
    //put new value into input box id-'qty'
    $('#qty').html(new_qty)
    })
};


$(document).ready(modify_qty);

如何将1或-1的参数传递给函数？我正在使用onClick（），但由于$（＆＃39; .botton＆＃39;）而单击（function（）{}），这似乎是多余的。

谢谢

Answer 1

如果您在按钮上使用数据属性，则可以获得所需的值。

HTML：

<button class = "botton" data-value="-1">-1</button>
<button class = "botton" data-value="1">+1</button>

JS：

function modify_qty() {
    //on click add or subtract
    $('.botton').click(function(){
        //get the value of input field id-'qty'
        var qty = parseInt($('#qty').val());

        var new_qty = qty + parseInt($(this).data('value'));

        //i don't want to go below 0
        if (new_qty < 0) {
                new_qty = 0;
        }
    //put new value into input box id-'qty'
    $('#qty').val(new_qty)
    })
};

$(document).ready(modify_qty);

更紧凑的JS：

$(function() {
    //on click add or subtract
    $('.botton').click(function(){
        //get the value of input field id-'qty'
        var $qty = $('#qty'),
            currentValue = parseInt($qty.val());
        $qty.val(Math.max(0, currentValue + parseInt($(this).data('value'))));
    })
});

更新：如果想要，你可以在没有数据属性的情况下实现这一点，因为你的按钮文本与你的值相同。

$(function() {
    //on click add or subtract
    $('.botton').click(function(){
        //get the value of input field id-'qty'
        var $qty = $('#qty'),
            currentValue = parseInt($qty.val()),
            newValue = currentValue + parseInt($(this).text());

        $qty.val(Math.max(0, newValue));
    })
});

Answer 2

这里有一个fiddle来帮助你掌握所发生的事情。基本上，对触发事件的元素的引用是$(this)或event.target。根据你所处的背景，事情会变得更加复杂，但是$('selector').on('event',function(event){ console.log($(this)) //is the reference to $('selector') });。 .attr() - ＆gt;元素属性列表。

简单的两个按钮计数器html jquery javascript

2 个答案: