带有点击的动态Ajax MySQL列表

Question

我有一个清单从MySQL，我想添加链接到。单击该链接时，将加载有关该项的信息。我有一个载有汽车和规格清单的数据库。单击列表中的项时，有关汽车的属性将加载。到目前为止，我已经成功地将其用于第一个列表项，但不确定如何将其迭代到其他选项：

我正在使用的代码来实现这个目标：

$(document).ready(function () {
    $('#clickthrough2').click(function () {
        $.post('referrer-ajax2.php', {
            clickthrough: $('#clickthrough').val(),
            ref_date_from2: $('#ref_date_from2').val(),
            ref_date_to2: $('#ref_date_to2').val()
        },
        function (data) {
            $('#car1').html(data);
        });
    });     
});

HTML：

<div id="car1" class="statdivhalf2">
<h4>Select Car</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
    <input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
    <input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
    <input type="hidden" id="clickthrough" value="<?php echo $row['car_name'] ?>" />
    <a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_name'] ?></div></a>

    <div class="col-1-6">
        <?php echo $row[ 'quantity']; ?>
    </div>
    <?php } } ?>
</div>
</div>

HTML后：

<div id="car1" class="statdivhalf2">
    <h4>Car Details</h4>

<div class="statgrid">
    <?php
    $result=$ mysqli->query($sql); 
    if($result->num_rows === 0) { echo 'No Cars in selected time period.'; } 
    else { while ($row = $result->fetch_array()) { 
    ?>
    <input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
    <input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
    <input type="hidden" id="clickthrough" value="<?php echo $row['car_details'] ?>" />
    <a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div></a>

    <div class="col-1-6">
        <?php echo $row[ 'quantity']; ?>
    </div>
    <?php } } ?>
</div>
</div>

如果有人能帮我指出正确的方向，我将非常感激。喜欢使用jQuery，但要更好地理解它。

编辑:我一直在搜索Google，并在单击1按钮such as this之后发现了许多运行查询的例子，但是我无法找到如何将这个过程迭代到mysql生成的链接上的一系列。

Answer 1

你走的方向是对的。当您正在迭代来自DB的结果时，当生成一个完整的HTML时，对每个元素使用一个id是不好的，实际上您将有多个具有相同id的元素，这就是问题所在。相反，使用类来标识元素。所以，代替这个：

<input type="hidden" id="ref_date_from2" value="<?php echo $date_from; ?>" />
<input type="hidden" id="ref_date_to2" value="<?php echo $date_to; ?>" />
<input type="hidden" id="clickthrough" value="<?php echo $row['car_name'] ?>" />
<a><div id="clickthrough2" class="col-5-6"><?php echo $row['car_name'] ?></div></a>

类似于这样的用户，其中id已更改为类，并且链接有一个带有行标识符的id，并将其包装在一个div中，其中包含一个惟一的id，以便于访问：

<div id="car-<?php echo $row['car_id'];?>">
   <input type="hidden" class="ref_date_from2" value="<?php echo $date_from; ?>" />
   <input type="hidden" class="ref_date_to2" value="<?php echo $date_to; ?>" />
   <input type="hidden" class="clickthrough" value="<?php echo $row['car_name'] ?>" />
   <a><div id="<?php echo $row['car_id'];?>" class="clickthrough2 col-5-6"><?php echo $row['car_name'] ?></div></a>
</div>

然后，对于单击事件，可以使用：

$(document).ready(function () {
    $('.clickthrough2').click(function () {
        // get car id
        carId = $(this).attr('id'); // get the car id to access each class element under the car div container

        $.post('referrer-ajax2.php', {
            clickthrough: $('#car-'+carId+' .clickthrough').val(),
            ref_date_from2: $('#car-'+carId+' .ref_date_from2').val(),
            ref_date_to2: $('#car-'+carId+' .ref_date_to2').val()
        },
        function (data) {
            $('#car1').html(data);
        });
    });     
});