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

How can I use id and value of text input?

本文关键字：id 和值 输入 何使用 文本      更新时间：2023-09-26

文本框：

<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"，并将文本框的值定义为"qty"以用于函数的其余部分？

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

最简单的方法之一是使用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>

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

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

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

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

详细信息请查看。

<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的多个输入的示例，您可以将"change"函数绑定到所有的".qty_txt"元素！您可以通过上面的代码获得productID和productValue！

相关文章：