jquery 除了第一行中的数据外，不会采用不同的数据

Question

我对 jquery 有疑问。我有一个 <table> 动态。

foreach ($_cards as $_card){

    $tabOdd = "";

    $statusInd = "";

    $counter++;

    if ($counter % 2 != 0){

        $tabOdd = "style='background-color:#eee'";

    }


    echo '<tr id="r'.$counter.'">';

    echo '<td '.$tabOdd.'>'.$counter.'</td>
        <input type="hidden" class="ajdi" name="id" value="'.$_card["id"].'">
        <td '.$tabOdd.'>'.$_card["title"].'</td>
        <input type="hidden" id="title" name="title" data-id="'.$_card["id"].'" value="'.$_card["title"].'">
        <td '.$tabOdd.' onclick="tdOption(this);">

            <span class="fSpan">'.$_card["description"].'</span>

            <input type="text" class="fSel" data-field="description" data-id="'.$_card["id"].'" style="width:150px;display:none">
             <input type="hidden" id="description" name="title" data-id="'.$_card["id"].'" value="'.$_card["description"].'">
        </td>

        <td '.$tabOdd.' onclick="tdOption(this);">

            <!--<span class="fSpan">'.$_card["quantity"].'</span>-->
            <input type="text" id="quantity" name="quantity">

            <input type="text"  data-field="quantity" data-id="'.$_card["id"].'" style="width:150px;display:none">

        </td>

        <td '.$tabOdd.' onclick="tdOption(this);">

            <span class="fSpan">'.$_card["price"].'</span>
             <input type="hidden" id="price" name="title" data-id="'.$_card["id"].'" value="'.$_card["price"].'">
            <input type="text" class="fSel" data-field="price" data-id="'.$_card["id"].'" style="width:150px;display:none">

        </td>



        <td '.$tabOdd.'><button type="button" data-id="'.$_card['id'].'" class="delButton" style="width:100px;font-size: 12px;" onclick="buyProduct();">Buy Product</button></td>';

    echo '</tr>';

}

这就是我用来从每一行中捕获数据的方法。

function buyProduct(){
        var c= confirm("Do you want to buy this product?");

        if (c == true) {

            var card = {};

            card['action'] = 'buyCard';

            /*$("form[name]").each(function () {

                var kljuc = $(this).attr("name");

                var vrijednost = $(this).val();

                card[kljuc] = vrijednost;

            });*/
            card['id']=$('.ajdi').val();
            card['title']=$('#title').val();
            card['description']=$('#description').val();
            card['quantity']=$('#quantity').val();
            card['price']=$('#price').val();
            console.log(card['id']);
            $.ajax({

                url: "adapter.php",

                type: "POST",

                dataType: "JSON",

                data: card,

                async: true,

                success: function (data) {

                    if (data > 0) {

                        showSuccess("You added this to cart!");

                    }

                }

            });

            return false;

        }

    }

所有这一切都是从第一行（这是合乎逻辑的，因为每一行都有那些 ID 和类）获取数据（当点击购买按钮时）。

我的导师告诉我做一个对象并获取每一行数据。那对我没有帮助。

Answer 1

好的...有几个问题和建议给你。

如前所述，您不能在 HTML 页面中复制 ID，因为那是无效的 HTML。请改用 classes。你现在似乎已经拥有了。
您的“购买产品”按钮上有 class 个 delButton。这不是个好主意 :) 例如，我将其更改为 class="buyButton"。
不要将内联处理程序与 jQuery（例如 onclick=""）一起使用。他们无缘无故地将事件注册与事件代码分开，并使其更难维护。我添加了一个委托事件处理程序，用于侦听对任何 buyButton classed 元素的任何点击。

例如

$('.dayView.dataTable').on('click', '.buyButton', function() {

这会监听 click 事件冒泡到 table。 jQuery 选择器在事件时使用，因此这也适用于动态项。

在 buyButton 点击处理程序中，您需要知道自己在哪一行。使用 closest

例如

var $tr = $(this).closest('tr');

没有必要把你的对象像字典一样使用，比如card['id']。只需访问 card.id 之类的属性。
使用范围 jQuery 选择器仅在行内搜索并在输入上使用 class 选择器：

例如像

card.id = $('.ajdi', $tr).val();
card.title = $('#title', $tr).val();
card.description = $('.description', $tr).val();
card.quantity = $('.quantity', $tr).val();
card.price = $('.price', $tr).val();

所以你的代码变成这样：

$('.dayView.dataTable').on('click', '.buyButton', function() {
  var c = confirm("Do you want to buy this product?");
  var $tr = $(this).closest('tr');
  if (c) {
    var card = {};
    card.action = 'buyCard';
    card.id = $('.ajdi').val();
    card.title = $('.title', $tr).val();
    card.description = $('.description', $tr).val();
    card.quantity = $('.quantity', $tr).val();
    card.price = $('.price', $tr).val();
    console.log(card.id);
    $.ajax({

      url: "adapter.php",
      type: "POST",
      dataType: "JSON",
      data: card,
      success: function(data) {
        if (data > 0) {
          showSuccess("You added this to cart!");
        }
      }
    });
    return false;
  }
});

JSFiddle（带有我复制的示例内容）： https://jsfiddle.net/8mbdpcus/1/

Answer 2

尝试将一些供应商（suprajzers）加入table！

jquery 除了第一行中的数据外，不会采用不同的数据

jquery wont take different data except from one in first row

jquery

button

cart