Question

我从mysql中提取数据并制作4个按钮;然后尝试使用jquery / ajax来调用事件。只有第一个有效，而另外3个没有。

这是查询：

<div class="row">
            <?  $query="SELECT * from product_bid order by RAND() LIMIT 4"; 
                $result=mysql_query($query);
                while($row=mysql_fetch_array($result))
                { ?>
                <div class="col-sm-3">
                    <div class="product">
                         <div class="title"><strong>Iphone 16GB</strong></span></div>
                         <img class="img-responsive" src="">
                         <small>ราคา <?=$row['price']; ?> บาท</small><hr>
                            <span class="countdown">00:23:32</span> <br>
                            <span class="price" id="price"><?= $row['total_bids']; ?> บาท</span> <br>
                            <span class="user">user</span> <br>
                            <input type="hidden" id="productid" name="id" value="<?= $productid=$row['id']; ?>">
                            <span class="bid btn btn-button btn-success btn-md" value="Bid">Bid</span>
                        </div>
                </div>

            <?  }

            ?>
      </div>

这是jquery / ajax：

    $(".bid").click(function () {
       buttonClick($(this).val());
    });

    function buttonClick(x) {
         $.ajax({
                    type: "GET",
                    url: "bid.php",
                    data: 'id=' + $('#productid').val(),

                  //  success: function(msg){
                  //      $('#price').html(msg);
                  //  }

                }); // Ajax Call
    }
</script>

谢谢，

Answer 1

页面上的多个元素不能具有相同的ID。要么将productid更改为类，要么以另一种方式更改它，使得每个元素的id都是唯一的。与价格相同。如果你这样做那么......

$(".bid").click(function () {
    buttonClick($(this));
});

function buttonClick($bid) {
    var $parent = $bid.parent();
    var productid = $parent.find('.productid').val();
    var $price = $parent.find('.price');

    $.ajax({
        type: "GET",
        url: "bid.php",
        data: 'id='+ productid,

        //  success: function(msg){
        //      $price.html(msg);
        //  }

    }); // Ajax Call
}

多按钮激活jQuery Ajax

1 个答案: