Javascript 如何在Jquery中循环使用相同的ID？

我已经创建了

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>

$（文档）.ready（函数（e）{
$（“#课程详细信息”）.hide（）；
如果（$（'#课程详细信息'）.hide（））{
$（“#展开”）。单击（函数（）{
$（“#课程详细信息”）.show（）；
});
}否则{
$（“#展开”）。单击（函数（）{
$（“#课程详细信息”）.hide（）；
});
}
});

PHP

foreach（$course\u记录为$course\u的过去课程）
{
$course\u name=$course\u records->CourseName；
$AssignmentMarks=$course\u records->AssignmentMarks；
$QuizMarks=$course\u records->QuizMarks；
作业分数
测验分数

HTML

ID

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

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

编辑：

---

您还可以尝试使用html

数据id

属性，如果您真的想要，该属性不需要是唯一的。

文档中的

id

必须是唯一的

如果要定义一个元素类，则使用类而不是非唯一标识符来定义

---

（您可能可以通过使用属性选择器，

$（“[id=course\u details]”）来解决这个问题，

，但我不建议这样做）

首先，如果您要有多个expand和course\u 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();
       }
    });
});

---

请参见

id应该是唯一的，请使用类尝试此操作：

这里我使用

varid=$（this.attr（'id'）；

来显示我想要的唯一div

---

请参阅下面的代码段： 这将有助于你理解你在实现目标时遇到的问题，我并没有解决你上面提到的所有问题，因为我希望你自己去学习和解决它

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

---

首先，确保为每个div创建唯一的ID，否则您的单击事件将不会像您期望的那样+1，我想强调一下if（$（“#course_details'）.hide（）），这非常愚蠢……您希望它如何工作？

    $(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>

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!
?>

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