当时使用隐藏/显示 - 在元素上
Using hide/show - on element at the time
我正在使用php和jquery在我的网页上打印文章。我希望能够同时在一篇文章上使用显示/隐藏jquery。就像现在一样,当我按隐藏或显示 foreach 循环中的所有<article>
元素都会受到影响。
HTML 和 PHP 代码
<section class='col-md-8'> <!-- Div for content, images etc. -->
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div id='pub'>";
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article id='pub_art'>" . $sp['content'] . "</article>";
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button id='hide'>Hide</button>";
echo "<button id='show'>Show</button>";
echo "</div>";
}
?>
</section>
J查询代码
$(document).ready(function(){
$("#hide").click(function(){
$("article").hide();
});
$("#show").click(function(){
$("article").show();
});
});
.CSS
#pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
因此,首先,您多次使用相同的 id,将它们更改为类(因为 id 只能使用一次,而类可以多次使用)。 像这样:
$output = '';
foreach($gp as $sp){
$output .= "<div class='pub'>";
$output .= "<h4>" . $sp['title'] . "</h4>";
$output .= "<article class='pub_art'>" . $sp['content'] . "</article>";
$output .= "<p>" . $sp['created'] . "</p>";
$output .= "<p>". $sp['writer'] ."</p>";
$output .= "<button class='hide'>Hide</button>";
$output .= "<button class='show'>Show</button>";
$output .= "</div>";
}
echo $output;
如您所见,我已经将每个回声连接成一个变量并一次回显所有回显,这是一个更好的 aproach(性能方面)
现在对于 JavaScript,您选择每个 article
标签,而不是这个,我们将查找与 hide
或 show
类位于同一div 内的同级article
。
$(document).ready(function(){
$(".hide").click(function(){
$(this).siblings('article').hide();
});
$(".show").click(function(){
$(this).siblings('article').show();
});
});
还有你的CSS(现在也带有类选择器)
.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
由于您使用 php 生成无效标记,并且对多个元素实例具有相同的 id,因此将属性id
更改为 class
:
<?php
$page = new CMS();
$gp = $page->getPage();
foreach ($gp as $sp) {
//var_dump($sp);
echo "<div class='pub'>"; // <-----here
echo "<h4>" . $sp['title'] . "</h4>";
echo "<article class='pub_art'>" . $sp['content'] . "</article>"; //<---here
echo "<p>" . $sp['created'] . "</p>";
echo "<p>". $sp['writer'] ."</p>";
echo "<button class='hide'>Hide</button>"; // <------here
echo "<button class='show'>Show</button>"; // <------here
echo "</div>";
}
?>
.css:
.pub article.pub_art {
width: 100%;
height: 100%;
background-color: blue;
display: none;
}
现在,您可以使用此脚本来工作:
$(document).ready(function(){
$(".hide, .show").click(function(){
$(this).siblings("article").toggle(this.className === 'show');
});
});
.hide
和.show
按钮是元素的同级,那么您只需要使用 .siblings()
访问其同级文章,因为它们都包含在div .pub
中。
你可以要求 Jquery 隐藏点击元素上方的第一篇文章:
$(document).ready(function(){
$("#hide").click(function(){
$(this).prev("article").hide();
});
$("#show").click(function(){
$(this).prev("article").show();
});
});
但是,我建议您更改PHP,以便它生成唯一的ID,以便创建有效的HTML。
相关文章:
- 在JavaScript中,如何修复元素显示和变量创建之间的初始差异
- 使用漂亮的照片点击另一个元素显示图像
- 我将如何在 HTML 中将数组中的所有元素显示为可点击的对象
- 使元素显示在最小屏幕大小上
- 更好的做法是通过CSS类或直接(通过DOM)修改HTML元素显示
- 如何在YouTube视频前制作元素显示
- 使隐藏元素显示 X 秒
- 如果元素显示:无;在媒体查询中,它们是否仍然加载
- 无法为每个元素显示高图
- 如何使用 jQuery 逐个元素显示
- 使用 jQuery 画布元素显示 Hiddin Div
- '李'mouseover事件被child'a'元素显示块
- JQuery元素显示/隐藏和控制流
- D3在工具提示上将内部列表的元素显示为不同的行
- AngularJS-动态创建<text区域>使用ngSanitize不会't显示(其他元素显示)
- 如何根据单击的元素的位置使元素显示在右侧或左侧
- 响应元素显示:无;在移动宽度,然后通过javascript按钮返回,但显示的链接断开:block;
- 当我再次单击时,它显示none,高度回到0px,但里面的元素显示,不显示none或离开页面
- 将一个元素显示在另一个元素的顶部,并在其上禁用鼠标悬停事件
- reactjs:为什么在render中定义的一些dom元素显示两次