具有点击率的动态 Ajax MySQL 列表

Question

我有一个来自 MySQL 的列表，我想将 link 添加到其中。单击 link 将加载有关该项目的信息。 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：

<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 上的系列生成了 links

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 已更改为类并且 link 具有带行标识符的 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);
        });
    });     
});

具有点击率的动态 Ajax MySQL 列表

Dynamic Ajax MySQL List with Clickthrough

javascript

php

mysql

ajax

jquery