Javascript 具有点击功能的动态Ajax MySQL列表

我有一个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:

以下内容后的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，但要更好地理解它

---

编辑：我一直在搜索谷歌，发现了很多在点击1按钮后运行查询的例子——但我不知道如何将这个过程迭代到mysql生成的一系列链接上，你的方向是正确的。 当您迭代数据库中的结果时，为每个元素使用一个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>

---

啊，我明白了。非常感谢，我会让你知道我的进展的！：工作得很有魅力。非常感谢你：！好时机！我想看看是否可以在第二个div上实现一个Back按钮，以返回到第一个div。但我认为，因为div是相同的，所以会导致问题。所以，我想我应该把它放在另一个div里，对吗？我不确定第一个和第二个div是什么意思，但是当你有几个元素具有相同的id时，那就麻烦了。将类用于重复的元素，您可以使用唯一标识符来生成唯一id。该类注释在适当的地方花了一分钱，但我仍然认为我遗漏了一些东西。我需要在OP中的“HTML After:”代码中添加一个后退按钮。这需要将我带回到“HTML:”下的代码中。我以为我可以执行以下操作，但它没有按照我的预期工作：$document.readyfunction{$'backRef'。clickfunction{$'.declined4'。load'index.php.declined4'；}；我增加了课程

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