[英]jQuery/PHP : Show/Hide with dynamic id
我想使用PHP使用动态ID显示/隐藏,在这里我可以选择并显示正确的div ID,但是当我从显示div中单击edit-course时,显示div应该关闭并显示一个新的div,但是我无法打开编辑课程div,这是我的代码
<?php
require 'init.php';
?>
<html>
<head>
<script src="js/jqueryv1.10.2.js"></script>
<script>
$ (function()
{
$ ('#selector').change(function()
{
$ ('.colors').hide();
$ ('#' + $(this).val()).fadeIn('slow');
});
});
$(function() {
$('.show-hide-action').click(function()
{ // bind action
$ ('.colors').hide();
$ ('#enclosure' + $(this).val()).fadeIn('slow');
});
});
</script>
</head>
<body>
<?php
echo '<div style="color:#8ac007;margin:30px;text-align:center;">
Select the course : <select id="selector">';
$sel_course = $db->query('SELECT * FROM courses');
$sel_course->execute();
echo '<option selected="selected">Select a course</option>';
while ($row = $sel_course->fetch(PDO::FETCH_ASSOC))
{
$course_name = $row['course_name'];
$id = $row['id'];
echo '<option value='.$id.'>'.$course_name.'</option>';
}
echo '</select>';
echo '</div>';
//Displaying the content
$dis_course = $db->query('SELECT * FROM courses');
$dis_course->execute();
while ($row = $dis_course->fetch(PDO::FETCH_ASSOC))
{
$course_name = $row['course_name'];
$course_id = $row['id'];
echo '<div id='.$course_id.' style="display:none;" class="colors">';
echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">Edit course </a>)';
echo '</div>';
echo '<div id="enclosure('.$course_id.')" style="display:none;">'. $course_name.' </div>';
}
?>
</body>
</html>
创建一个包装div。
echo "<div class='wrapper'>";
echo '<div id='.$course_id.' style="display:none;" class="colors">';
echo ''.$course_name.'(<a class="show-hide-action" style="cursor:pointer;">Edit course </a>)';
echo '</div>';
echo '<div class="enclosure" style="display:none;">'. $course_name.' </div>';
echo "</div>";
并更改脚本,如下所示:
$(function() {
$('.show-hide-action').click(function()
{ // bind action
$ ('.enclosure').hide();
$ (this).closest('.wrapper').find('.enclosure').fadeIn('slow');
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.