Question

我再次需要关于这个JQuery代码的帮助我真的对JQuery有一点经验很抱歉如果这个问题很乱...... 因为我从他们那里复制了这个错误信用http://www.w3schools.com

//the JS code
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

<p class="flip">click to view full credit report details</p>
<div class='panel'>                              
 <?php                          
   display_column_name($table_name,$table_id);
 ?>
</div>

好，所以代码实际上是循环的，这取决于我在我的数据库中有多少数据所以现在的问题是当我点击“点击查看完整的信用报告详细信息”它打开一切..我想要的是当我点击它时它只打开那个部分......而不是其他人......对此有什么看法？我真的需要帮助，谢谢：）

Answer 1

每个p元素都应该有动态ID。它用另一个动态设置的id调用div。

在你的循环中你可以这样做

$(document).ready(function(){
$("#flip_<?php echo $id_from_database;?>").click(function(){
    $("#panel_<?php echo $id_from_database;?>").slideToggle("slow");
  });
});

和你的html，这也应该在循环内

<p id="flip_<?php echo $id_from_database;?>">click to view full credit report details</p>
<div id='panel_<?php echo $id_from_database;?>'>                              
 <?php                          
   display_column_name($table_name,$table_id);
 ?>
</div>

或

第二种方法

环境内的代码

<p id="flip_<?php echo $id_from_database;?>" onclick="expandDiv('<?php echo $id_from_database;?>')">click to view full credit report details</p> <div id='panel_<?php echo $id_from_database;?>'> <?php display_column_name($table_name,$table_id); ?> </div>

外部循环的javascript函数

function expandDiv(id){ $("#panel_"+id).slideToggle("slow"); }

其中

$id_from_database是来自数据库的记录的唯一ID。

Answer 2

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('.report a').click(function(){
        var id = $(this).attr("id");
        $('.detail').slideUp('slow');
        $('#detail_'+id).slideDown('slow');
    });
});
</script>

<style>
    .detail{display: none;}    
</style>
<div id="reports">

    <div class="report">
        <a id="1" href="#">click to view full credit report details</a>
        <div class="detail" id="detail_1">
            Here are details related to report # 1
        </div>
    </div>
    <div class="report">
        <a id="2" href="#">click to view full credit report details</a>
        <div class="detail" id="detail_2">
            Here are details related to report # 2
        </div>
    </div>
    <div class="report">
        <a id="3" href="#">click to view full credit report details</a>
        <div class="detail" id="detail_3">
            Here are details related to report # 3
        </div>
    </div>
</div>

<强>循环：在你的循环中你必须像这样制作动态ID

<div class="report">
    <a id="<?php echo $current_record_id; ?>" href="#">click to view full credit report details</a>
    <div class="detail" id="detail_<?php echo $current_record_id; ?>">
        <?php echo $detail; ?>
    </div>
</div>

slideToggle功能可以向下滑动所选的div

2 个答案: