1

我正在开发一个课堂学生出勤网站，我在做什么以及我期望我的 php 编码做什么，它工作正常......当更新出勤时，每个学生只需点击学生列表页面中每个学生的缩略图，它的工作......

我的问题是我add description在缩略图上为每个学生添加了一个按钮，它不可见，当用户将鼠标悬停在学生缩略图上时仅显示此按钮，然后我添加了一个切换显示/隐藏 div 按钮，当用户单击此可见按钮时我的小表格 div 将显示...

这是我用按钮切换显示/隐藏 div...

HTML

<div id='content'>form content here</div>
<input type='button' id='hideshow' value='add description'>

jQuery

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

它在单击添加描述按钮时起作用，但我的问题是，如果我有超过 2 个或以上的学生，我的列表当我单击此按钮时，所有学生现在都形成内容 div 显示，我只需要一个学生 div 显示，我的意思是上面的哪个学生按钮我们点击，只有那个显示...我认为这个问题是因为使用了唯一的 id，如何解决它。？任何的想法。？？？

编辑 这是我的 php 生成的学生列表显示

<?php if ($students) { ?>
        <?php foreach ($students as $student) { ?>    
        <div class="student">
        <div class="thumb">
        <div class="content" style="display:none;">
            DIV CONTENT HERE
        </div>
        <input type='button' id='hideshow' value='add description'>    
        <img class="img" src="<?php echo $student['image']; ?>" alt="<?php echo $student['name']; ?>" />
        </div>    
        <div class="name"><?php echo $student['name']; ?><?php echo $student['student_id']; ?></div> 
        </div>
       <?php } else { ?>
    <div class="empty"><?php echo $text_empty; ?></div>
    <?php } ?>
<?php } ?>

这是我现在得到的截图... 在此处输入图像描述

这就是我真正想要的 在此处输入图像描述

谢谢...

4

2 回答 2

1

我想我理解你的问题。尝试使用prev()来获取上一个兄弟，而class="content"不是使用id，因为有多个。

也.live()已被弃用，更喜欢.on()因为.live()在 v1.9 中被删除。

JS

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
         jQuery(this).prev('.content').toggle('show');
    });
});

HTML

<div class='content'>form content here</div>
<input type='button' id='hideshow' value='add description'>

更新

现在你包含了你的 PHP，我明白了这个问题。问题是您使用的idfor hideshow, ids 应该是唯一的，我相信 jQuery 实际上会停止检查是否有多个。试试这个：

HTML

<div class='content'>form content here</div>
<input type='button' class='hideshow' value='add description'>

JS

jQuery(document).ready(function(){
    jQuery('.hideshow').on('click', function(event) {        
         jQuery(this).prev('.content').toggle();
    });
});

所以与我原来的答案的不同之处在于它没有使用 class .hideshow，而不是 an id，我们只是调用.toggle()显示/隐藏而不是使用 CSS class .show。

于 2013-04-01T12:00:59.120 回答
0

尝试为多个学生循环，例如

foreach($total_stndts as $row)
{
    echo "<div class='content_<?php echo $row['stdnt_id'];?>'>form content here</div>";
    echo "<input type='button' id='<?php echo $row['stdnt_id'];?>' value='add description'>";   
}

然后在你的jQuery中尝试像

$("input[type='button']").live('click',function(){
    id = $(this).attr('id');
    $('#content_'+id).toggle('show');  
})
于 2013-04-01T12:05:31.537 回答