0

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

これについて本当に助けが必要です。何でもいいです！

-ヘザーベア

4

4 に答える 4

1

まず、私が知っているほとんどの人は、jQuery シャッターを使用して、DOM 要素にアタッチされたイベントを HTML で直接表示します。

<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>
于 2013-09-11T20:13:18.507 に答える