我发现这个脚本隐藏并显示内容,原始代码仅用于两个项目,并在它们之间切换。我想用很多项目来完成这项工作而不需要切换它们;当我点击" news0"当我点击" news1"我只想显示新闻0的内容。只显示新闻1等等,我需要在代码中更改什么? (我不是剧本家伙)
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#news2").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").fadeOut(function(){
$(this).next().fadeIn();
});
else {
$(".divs div:visible").fadeOut(function(){
$(".divs div:first").fadeIn();
});
}
return false;
});
$("#news1").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").fadeOut(function(){
$(this).next().fadeIn();
});
else {
$(".divs div:visible").fadeOut(function(){
$(".divs div:first").fadeIn();
});
}
return false;
});
$("#news0").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").fadeOut(function(){
$(this).prev().fadeIn();
});
else {
$(".divs div:visible").fadeOut(function(){
$(".divs div:last").fadeIn();
});
}
return false;
});
});
</head>
<body>
<div class="container">
<div class="row">
<figure class="col-lg-5 col-sm-4 wow fadeInLeft">
<ul style="font-size:12px; margin-top:18%;">
<div>
<ul>
<li><a href="#" id="news2">4/01/2017 <br>Here is News 2</a></li><hr />
<li><a href="#" id="news1">3/01/2017 <br>Here is News 1</a></li><hr />
<li><a href="#" id="news0">2/01/2017 <br>Here is News 0</a></li>
</ul>
</div>
</figure>
<div class="col-lg-7 col-sm-8 featured-work">
<h2>News</h2>
<div class="featured-box">
<div class="featured-box-col1 wow fadeInRight delay-02s">
</div>
<div class="featured-box-col2 wow fadeInRight delay-02s">
<div class="divs">
<div class="news2">
<h3>Here is News 2</h3>
<p>Content of News #2</p>
</div>
<div class="news1">
<h3>Here is News 1</h3>
<p>Content of News #1</p>
</div>
<div class="news0">
<h3>Here is News 0</h3>
<p>Content of News #0</p>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
此代码过于复杂。在您的html中添加一个名为data-item-status
的数据属性,然后将除一个之外的所有属性设置为隐藏。这样,您就可以使用JavaScript专注于状态更改。
您必须在js中使用addEventListener
添加一个将状态从可见状态切换为隐藏状态的点击事件。但是通过使用document.querySelectorAll([dat-item-status])
一次获取所有元素来执行此操作,这将为您提供一个数组。循环它以添加事件侦听器。
然后是一个函数,用于将所有数据切换为隐藏,然后将您单击的数据切换为可见。
至于隐藏它们。根据数据属性的值使用一些css。
如果不清楚,请告诉我。
这是一个使用css进行动画/转换时如何使用JavaScript和数据属性管理状态的示例。
请运行代码段并查看数据属性用于激活和停用每个项目的方式。也不是说这是一个DRY(不要重复自己)解决方案,它实际上可以占用页面中的任意数量的项目。
对于动画,只要你有适当的状态管理,你就可以把它改成你想要的任何东西。祝你好运
class manageVisibleItems {
constructor () {
this.items = document.querySelectorAll('[data-item-status]');
this.addEventListeners();
}
addEventListeners () {
for (let item of this.items) {
item.addEventListener('click',(event) => this.handleClick(event));
}
}
handleClick (event) {
this.resetAllItems();
event.target.parentNode.dataset.itemStatus = 'active';
}
resetAllItems () {
for (let item of this.items) {
item.dataset.itemStatus = 'inactive';
}
}
}
new manageVisibleItems();
div[data-item-status="active"] p {
opacity: 1;
max-height: 200px;
}
div[data-item-status="inactive"] p {
opacity: 0;
max-height: 0;
}
p {
transition: 0.4s ease;
}
<main>
<div data-item-status="active">
<h2>Item 1</h2>
<p>Some text from Item 1</p>
</div>
<div data-item-status="inactive">
<h2>Item 2</h2>
<p>Some content from Item 2</p>
</div>
<div data-item-status="inactive">
<h2>Item 3</h2>
<p>Some stuff from Item 3</p>
</div>
<div data-item-status="inactive">
<h2>Item 4</h2>
<p>Some things Item 4</p>
</div>
</main>