使用jquery在与可点击元素相同的行中查找文本框的值

Question

我有一个 HTML 表格。在每一行中，我都有一个“添加”按钮以及一个数量输入框、型号#、型号描述和价格。单击该按钮时，我会触发一个 onclick 事件，该事件会触发我们的分析跟踪功能。

单击添加按钮时，我需要从单击“添加”按钮的同一行的文本框中获取数量。目前，唯一返回的元素是表的第一行。我尝试了几种使用 .click、.live 和 .on 以及 .closest 的方法。

这是代码，我希望有人能帮助我，因为我在试图获得这个值时迷失了方向。

HTML

<table id="ElementCount10">
    <thead>
        <tbody>
            <tr class="odd">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
                </td>
                <td class="model sorting_1">
                    <a class="sku" href="#">Sample Part</a>
                </td>
                <td class="descript" rowspan="1" colspan="1">Part Description</td>
                <td class="avail"><span class="instock">In Stock</span></td>
                <td class="price">$318.00</td>
                <td class="cart">
                    <input type="hidden" name="labelid" value="1234567">
                    <input type="hidden" name="productid" value="Part Number">
                    <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                    <a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">
                </td>
            </tr>
            <tr class="even">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
               </td>
               <td class="model sorting_1"><a class="sku" href="#">Part Number</a></td>
               <td class="descript" rowspan="1" colspan="1">Part Description</td>
               <td class="avail"><span class="instock">In Stock</span></td>
               <td class="price">$371.00</td>
               <td class="cart">
                   <input type="hidden" name="labelid" value="1234567">
                   <input type="hidden" name="productid" value="Part Number">
                   <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                   <a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">
               </td>
          </tr>

JS

function SiteCatalystSingleTracking(carttype, requiredamt, $this, thisTarget) { // $this is the actual table to process
    var parts = '';
    var node = "";
    var parent_path = '';
    alert("T:" + thisTarget);
    thisNewTarget = $(thisTarget).parents("td.cart").children("input[name=quantity]").val();
    alert("NT: " + thisNewTarget);
    parent_path = $($this).parents("table").attr("id");
    var sku = $("#" + parent_path + " tbody tr .cart").children("input[name=productid]").val();
    var qty = $("#" + parent_path + " tbody tr .cart").children("input[name=quantity]").val();
    var labelid = $("#" + parent_path + " tbody tr .cart").children("input[name=labelid]").val();
 }

我真的需要一些帮助。任何事情都会很棒！

-希瑟熊

Answer 1

$($this).closest("tr").find("input[name=quantity]").val();

虽然你真的不应该将你的参数命名为$this，因为它不是一个jquery 对象而是一个DOM 元素。这真的很令人困惑。

Answer 2

首先，我认识的大多数人都使用 jQuery 快门直接在 HTML 中查看附加到 DOM 元素的事件，就像您在这里所做的那样：

<a class="btn-primary" href="#" onclick="SiteCatalystSingleTracking('SingleAddToCart',1,this,event.target.nodeName);return false;">

我强烈建议不要这样做。

我推荐的是这样的：

<table id="ElementCount10">
    <thead>
        <tbody>
            <tr class="odd">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
                </td>
                <td class="model sorting_1">
                    <a class="sku" href="#">Sample Part</a>
                </td>
                <td class="descript" rowspan="1" colspan="1">Part Description</td>
                <td class="avail"><span class="instock">In Stock</span></td>
                <td class="price">$318.00</td>
                <td class="cart">
                    <input type="hidden" name="labelid" value="1234567">
                    <input type="hidden" name="productid" value="Part Number">
                    <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                    <input type="button" value="Add" />
                </td>
            </tr>
            <tr class="even">
                <td class="image">
                    <div class="modelphoto link"><a rel="#"><img class="modelthumb" alt="" src="image.jpg"></a></div>
               </td>
               <td class="model sorting_1"><a class="sku" href="#">Part Number</a></td>
               <td class="descript" rowspan="1" colspan="1">Part Description</td>
               <td class="avail"><span class="instock">In Stock</span></td>
               <td class="price">$371.00</td>
               <td class="cart">
                   <input type="hidden" name="labelid" value="1234567">
                   <input type="hidden" name="productid" value="Part Number">
                   <input class="qty" type="text" name="quantity" value="" size="2" maxlength="3">
                   <input type="button" value="Add" />
               </td>
          </tr>

然后，在 JavaScript 中，我会做类似的事情

<script>
  $().ready(function() {
    $('#ElementCount10').on('input:button','click',function(evt) {
      var quantity = $(this).closest('tr').find('input.qty)'.val();
      // Do you stuff with the value
    });
  });
</script>

Answer 3

<script>
$(document).ready(function(){
    $(".btn-primary").click(function(){
        qty = $(this).parents('.cart').find('.qty').val();
        alert(qty);
    });
});
</script>

Answer 4

使用prev() 获取之前的输入，如下所示：

$(document).ready(function(){
        $(".btn-primary").click(function(){
        alert($(this).prev('input[type=text].qs').val);
        });
    });