Question

我有一个HTML表格。在每一行中，我都有一个“添加”按钮以及数量输入框，型号＃，型号说明和价格。单击该按钮后，我有一个onclick事件，它会触发我们的Google Analytics跟踪功能。

点击添加按钮，我需要从单击“添加”按钮的同一行的文本框中获取数量。目前，返回的唯一元素是表的第一行。我尝试过使用.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();
 }

我真的需要一些帮助。一切都会很棒！

-HeatherBear

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);
        });
    });

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

HTML

JS

4 个答案: