Question

文本框：

<input class="qty_txt" input id="1234" type="text"  placeholder="Current item QTY">

使用Javascript：

$(".qty_txt").on("change", function () {

var productID = elem.id;
var qty = elem.value;

alert(productID + qty);

});

如何使用文本框中的ID，将其定义为'productID'并将texbox的值定义为'qty'以在函数的其余部分中使用？

http://jsfiddle.net/VnYm7/4/

Answer 1

更容易做的事情之一是使用jQuery $(this)选择器将当前分区作为参数传递给函数。这样，相同的函数适用于所有.qty-txt类。

您可以使用jQuery的.attr()方法获取div的ID，然后调用.val()来获取值。您也可以在这里使用原生JS'.value方法。

需要注意的重要事项：jQuery代码周围的$(document).ready()包装器可确保在页面加载时正确调用该代码。如果没有调用它，如果输入框被更改，浏览器将不知道该做什么。

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!--jQuery Google CDN-->
        <script type="text/javascript">
               $(document).ready(function() { 
                   $(".qty_txt").on("change", function ($(this)) {

                       var productID = $(this).attr("id");
                       var qty = $(this).val();

                       alert(productID + qty);

                   });
               });

        </script>
    </head>
    <body>
        <input class="qty_txt" input id="1234" type="text"  placeholder="Current item QTY">
    </body>
</html>

Answer 2

var productID = $(this).attr('id');
var qty = $(this).val();

This视频更好地说明了javascript中this和上下文的使用

Answer 3

如果要从事件的目标中检索属性，可以使用function ()中指定的参数传递给on()，如下所示：

$(".qty_txt").on("change", function (e) {
  var productID = e.target.id;
  var qty = e.target.value;

  alert(productID + ":" +  qty);
});

请查看this了解详情。

Answer 4

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    </head>
    <body>
        <input type="text" class="qty_txt" id="id1" />
        <input type="text" class="qty_txt" id="id2" />
        <input type="text" class="qty_txt" id="id3" />
        <script>
        $(".qty_txt").on("change", function () {
          var productID = this.id, qty = this.value;
          alert(productID + qty);
        });
        </script>
    </body>
</html>

这是几个具有不同ID的输入的示例，您可以绑定＆＃34;更改＆＃34;功能到所有＆＃34; .qty_txt＆＃34;元素！您可以通过上面的代码获得productID和productValue！

如何使用文本输入的id和值？

4 个答案: