動態Ajax MySQL列表與點擊

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後：

<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生成的鏈接

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