gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 02:20:25 27 4
gpt4 key购买 nike

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

我的问题是我在缩略图上为每个学生添加了一个添加描述按钮,它是不可见的,当用户将鼠标悬停在学生缩略图上时仅显示此按钮,然后我添加了一个切换显示/隐藏带按钮的 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

谢谢...

最佳答案

我想我理解你的问题。尝试使用 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,我就明白了这个问题。问题是你使用 id 作为 hideshowid 应该是唯一的,我相信 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

关于javascript - 使用按钮切换显示/隐藏 div 以获取多个结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15743039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com