[英]How to Loop through same ID in Jquery?
I have created 2 Div
, 1 Div is hidden and visible when i click on the Parent Div.我创建了2 Div
,当我单击父 Div 时,1 Div 是隐藏和可见的。 These Div's are in a php
foreach Loop, so there can be many number of Divs.这些 Div 位于php
foreach 循环中,因此可以有很多个 Div。
I have written the following code, Its working fine for the first result only, and not affecting the rest results.我编写了以下代码,它仅对第一个结果工作正常,不影响其余结果。
Kindly check it and guide me.请检查它并指导我。
Thanks谢谢
<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 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!
?>
HTML ID
's need to be unique (only one per page). HTML ID
需要是唯一的(每页只有一个)。
You should try using classes rather than ID's for this purpose (eg looped output)为此,您应该尝试使用类而不是 ID(例如循环输出)
EDIT:编辑:
You could also try using the html data-id
property which does not need to be unique if you really wanted to.你也可以尝试使用 html data-id
属性,如果你真的想要,它不需要是唯一的。
An id
must be unique within a document. id
在文档中必须是唯一的。
If you want to define a class of elements, then do so with classes, not non-unique identifiers.如果要定义元素类,请使用类而不是非唯一标识符。
(You can probably hack this by using attribute selectors, $('[id=course_details]')
, but I wouldn't recommend it) (您可能可以通过使用属性选择器$('[id=course_details]')
来破解它,但我不推荐它)
Firstly if you are going to have multiple instances of expand and course_details divs, you should not set these as ids.首先,如果您要拥有多个 expand 和 course_details div 实例,则不应将它们设置为 id。 Use classes instead.改用类。
Then for your javascript, try something like this然后对于您的 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();
}
});
});
Please see Fiddle here请在此处查看小提琴
An id should be unique, try this using class:一个 id 应该是唯一的,试试这个使用类:
Here i use var id = $(this).attr('id');
在这里我使用var id = $(this).attr('id');
to show the only div that i want显示我想要的唯一 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>
But here you need to vinculate the div expand
with the div course_details
, i put the same id using $i
但是在这里您需要使用 div course_details
来确定 div expand
,我使用$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!
?>
please refer this code snippet at JsFiddle which will help you understand your problem in achieving, I didn't solve all of your problem above mentioned as I want you to learn and figure it out by yourself.请参考JsFiddle 上的这段代码片段,这将帮助您了解实现中的问题,我没有解决您上面提到的所有问题,因为我希望您自己学习并弄清楚。
$('div[id^="course_details"]').hide();
$('div[id^="expand"]').click(function(){
$(this).next().show();
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.