Question

我正在开发一个教室学生出勤网站，我正在做什么以及我期望我的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 } ?>

这是我现在得到的截图... enter image description here

这就是我真正想要的 enter image description here

感谢...

Answer 1

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

同样.live()已被弃用，因为在{v1.9中删除了.live()，所以更喜欢.on()。

<强> 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，我理解了这个问题。问题是你使用id hideshow，id应该是唯一的，我相信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();
    });
});

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

Answer 2

尝试为多个学生循环播放

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');  
})

使用按钮切换显示/隐藏div以获得多个结果

2 个答案:

更新