如何在 Jquery 中循环遍历相同的 ID？答案

【问题标题】：How to Loop through same ID in Jquery?如何在 Jquery 中循环遍历相同的 ID？
【发布时间】：2014-04-04 11:50:00
【问题描述】：

我创建了2 Div，当我单击父 Div 时，1 个 Div 被隐藏并且可见。这些 Div 位于 php foreach 循环中，因此可以有很多个 Div。

我写了以下代码，它只对第一个结果工作正常，不影响其余结果。

请检查并指导我。

谢谢

<script>
    $(document).ready(function (e) {
        $('#course_details').hide();
        if ($('#course_details').hide()) {
            $('#expand').click(function () {
                $('#course_details').show();
            });
        } else {
            $('#expand').click(function () {
                $('#course_details').hide();
            });
        }
    });
</script>

PHP

    foreach ($past_course as $course_records)
    {
        $course_name= $course_records->CourseName;

        $AssignmentMarks= $course_records->AssignmentMarks;
        $QuizMarks=     $course_records->QuizMarks;

       <div id="expand">        
            <h3><?php echo $course_name ?> </h3>    
        </div>

        <div id="course_details" >

            <table border="1">
                <tr>
                    <th>
                        Assignment Marks
                    </th>
                    <td>
                        <?php echo $AssignmentMarks;    ?>
                    </td>
                </tr>


                <tr>
                    <th>
                        Quiz Marks
                    </th>
                    <td>
                        <?php echo $QuizMarks;  ?>
                    </td>
                </tr>

        </div>

<?php               

        } //foreach Loop End!
?>

【问题讨论】：

首先，确保为每个 div 创建唯一的 ID，否则您的点击事件将不会像您预期的那样运行

标签： javascript php jquery html

【解决方案1】：

HTML ID 必须是唯一的（每页只有一个）。

为此，您应该尝试使用类而不是 ID（例如循环输出）

编辑：

您也可以尝试使用 html data-id 属性，如果您真的想要，它不需要是唯一的。

【讨论】：

【解决方案2】：

id必须在文档中唯一。

如果您想定义一个元素类，请使用类，而不是非唯一标识符。

（您可能可以通过使用属性选择器来破解它，$('[id=course_details]')，但我不推荐它）

【讨论】：

【解决方案3】：

首先，如果您要拥有多个 expand 和 course_details div 实例，则不应将它们设置为 id。改用类。

然后对于您的 javascript，尝试这样的操作

$(document).ready(function(){
    $('.course_details').hide();
    $('.expand').on('click',function(){
       if($(this).next('.course_details').is(":visible")){
           $(this).next('.course_details').hide();
       } else {
           $(this).next('.course_details').show();
       }
    });
});

请看Fiddle here

【讨论】：

+1，我想强调一下 if ($('#course_details').hide()) 这很愚蠢......你希望它如何工作？

【解决方案4】：

id 应该是唯一的，使用 class 试试这个：

在这里我使用var id = $(this).attr('id'); 来显示我想要的唯一 div

    $(document).ready(function(e) {
        $('.course_details').hide();

    if($('.course_details').hide())
    {           
        $('.expand').click(function() { 
            var id = $(this).attr('id');
            $('#course_details' + id).show();            
            });             

    }

    else 
    {       $('.expand').click(function() {  
               var id = $(this).attr('id');       
               $('#course_details' + id).hide();            
            });         
    }

    });

</script>

但是在这里你需要将 div expand 与 div course_details 联系起来，我使用 $i 输入相同的 id

i = 0;
foreach ($past_course as $course_records)
    {
        $course_name= $course_records->CourseName;

        $AssignmentMarks= $course_records->AssignmentMarks;
        $QuizMarks=     $course_records->QuizMarks;

       <div class="expand" id="<?php echo $i ?>">        
            <h3><?php echo $course_name ?> </h3>    
        </div>

        <div class="course_details" id="course_details<?php echo $i ?>" >

            <table border="1">
                <tr>
                    <th>
                        Assignment Marks
                    </th>
                    <td>
                        <?php echo $AssignmentMarks;    ?>
                    </td>
                </tr>


                <tr>
                    <th>
                        Quiz Marks
                    </th>
                    <td>
                        <?php echo $QuizMarks;  ?>
                    </td>
                </tr>

        </div>

<?php               
            i++;
        } //foreach Loop End!
?>

【讨论】：

【解决方案5】：

请参考此代码 sn-p 在 JsFiddle 这将帮助您了解您在实现过程中遇到的问题，我并没有解决您上面提到的所有问题，因为我希望您自己学习和解决。

$('div[id^="course_details"]').hide();
$('div[id^="expand"]').click(function(){
    $(this).next().show();
})

【讨论】：