Question

我有一个MySQL列表，我想添加链接。单击时，链接将加载有关该项目的信息。 EG我有一个包含汽车和规格列表的数据库。单击列表中的项目时，将加载有关汽车的属性。到目前为止，我已经设法让它适用于第一个列表项，但不知道如何将其迭代到其他选项：

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

$(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 After：

<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，但试图更好地理解它。

编辑：我一直在搜索谷歌并找到许多运行查询的例子，点击1按钮 - such as this - 但我无法找到如何将该过程迭代到一系列关于mysql生成的链接< / p>

Answer 1

你的方向正确。在迭代数据库的结果时，为每个元素使用一个id是不好的，因为生成完整的HTML会实际上有多个具有相同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，并将其全部包含在具有唯一ID的div中以便于访问：

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

带有Clickthrough的动态Ajax MySQL列表

1 个答案: