使用jQuery在div之间导航

Question

我目前有一个div，当单击该div会将数据发布到另一个页面并重新加载div。 我想在新的div上添加一个后退按钮（ #backref ），使我回到上一个div。 我发现了一些关于此的文章，您可以通过它们添加display:none; 到要浏览的div，但显然这是我的初始div，因此我无法使用该CSS。 关于如何解决这个问题的任何建议，将不胜感激！

我用来实现此目的的代码：

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

index.php文件：

<div id="car1" class="declined3 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()) { 
    ?>
<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>

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

引荐-ajax2.php：

<div id="car1" class="declined4 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()) { 
    ?>
    <div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div>
    <div class="col-1-6"><?php echo $row[ 'quantity']; ?></div>
    <?php } } ?>
    <a><div id="backref">< Back</div></a>
</div>
</div>

编辑：我尝试了以下，因为它不起作用：

$('#backref').click(function () {
  $('.declined4').hide();
  $('.declined3').show();
});

Answer 1

无需向div重新加载新内容，而是可以在每次隐藏旧的div时创建一个新的div。 然后，您可以通过使用id或（可能更好）“ data-”属性为每个div索引来遍历它们。