Question

我创建了2 Div，当我点击Parent 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!
?>

Answer 1

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

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

编辑：

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

Answer 2

id 必须在文档中唯一。

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

（你可以通过使用属性选择器$('[id=course_details]')来解决这个问题，但我不推荐它）

Answer 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

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

Answer 5

请参阅此代码段 JsFiddle 这将帮助您了解您的实现问题，我没有解决您上面提到的所有问题，因为我希望您自己学习和解决。

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

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

5 个答案: