Javascript 隐藏和显示多个项目_Javascript

Javascript 隐藏和显示多个项目

javascript

Javascript 隐藏和显示多个项目,javascript,Javascript,我发现这个脚本可以隐藏和显示内容，原始代码只用于两个项目，并且可以在它们之间切换。我想得到这项工作与许多项目没有切换他们；当我点击“新闻0”时，我只想显示新闻0的内容，当我点击“新闻1”时，只应显示新闻1，依此类推，我需要在代码中更改什么？（我不是写剧本的人） $（文档）.ready（函数（）{ 元（“.div div”）。每个（函数（e）{ 如果（e！=0） $（this.hide（）； }); $（“#新闻2”）。单击（函数（）{ if（$（“.divs div:visible”）.next

我发现这个脚本可以隐藏和显示内容，原始代码只用于两个项目，并且可以在它们之间切换。我想得到这项工作与许多项目没有切换他们；当我点击“新闻0”时，我只想显示新闻0的内容，当我点击“新闻1”时，只应显示新闻1，依此类推，我需要在代码中更改什么？（我不是写剧本的人）

$（文档）.ready（函数（）{
元（“.div div”）。每个（函数（e）{
如果（e！=0）
$（this.hide（）；
});
$（“#新闻2”）。单击（函数（）{
if（$（“.divs div:visible”）.next（）.length！=0）
$（“.divs div:visible”）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
否则{
$（“.divs div:visible”）.fadeOut（函数（）{
$（“.divs div:first”）.fadeIn（）；
});
}
返回false；
});
$（“#新闻1”）。单击（函数（）{
if（$（“.divs div:visible”）.next（）.length！=0）
$（“.divs div:visible”）.fadeOut（函数（）{
$（this.next（）.fadeIn（）；
});
否则{
$（“.divs div:visible”）.fadeOut（函数（）{
$（“.divs div:first”）.fadeIn（）；
});
}
返回false；
});
$（“#新闻0”）。单击（函数（）{
if（$（“.divs div:visible”）.prev（）.length！=0）
$（“.divs div:visible”）.fadeOut（函数（）{
$（this.prev（）.fadeIn（）；
});
否则{
$（“.divs div:visible”）.fadeOut（函数（）{
$（“.divs div:last”）.fadeIn（）；
});
}
返回false；
});
});






新闻
这里是新闻2
新闻内容#2
这里是新闻1
新闻内容#1
这里是新闻0
新闻内容#0

说明这段代码过于复杂。在html中添加名为

数据项状态的数据属性

，然后将除一个之外的所有属性设置为隐藏。通过这种方式，您可以使用JavaScript只关注状态更改

您必须在js中使用

addEventListener

，添加一个click事件，将状态从可见切换到隐藏。但是，通过使用

document.querySelectorAll（[dat item status]）

一次获取所有元素，这将为您提供一个数组。循环它以添加事件侦听器

然后是一个函数，用于将所有数据模式切换为隐藏，然后将单击的数据模式切换为可见

至于把它们藏起来。根据数据属性的值使用一些css

如果有什么不清楚，请告诉我

例子这是一个如何在使用css设置动画/转换时使用JavaScript和数据属性管理状态的示例

请运行代码段并查看数据属性用于激活和停用每个项目的方式。也不是说这是一个干燥（不要重复自己）的解决方案，实际上可以在一个页面中包含任意数量的项目

至于动画，只要有适当的状态管理，您可以将其更改为您想要的任何内容。祝你好运

类manageVisibleItems{
构造函数（）{
this.items=document.querySelectorAll（“[数据项状态]”）；
this.addEventListeners（）；
}
addEventListeners（）{
对于（让此.items中的项目）{
item.addEventListener（'click'，（event）=>this.handleClick（event））；
}
}
handleClick（事件）{
这是resetAllItems（）；
event.target.parentNode.dataset.itemStatus='active'；
}
重置所有项（）{
对于（让此.items中的项目）{
item.dataset.itemStatus='inactive'；
}
}
}
新的manageVisibleItems（）
div[data item status=“active”]p{
不透明度：1；
最大高度：200px；
}
div[数据项状态=“非活动”]p{
不透明度：0；
最大高度：0；
}
p{
过渡期：0.4s；
}

项目1
第1项的一些案文
项目2
第2项的一些内容
项目3
第三项的一些东西
项目4
第四项
包含HTML tooI添加的简化HTML请看一看-我相信这正是您想要做的感谢您的回复，我的java脚本知识非常有限，因此如果您可以，我需要更多的指导或示例，谢谢。@JosefObermeier如果有不清楚的地方，请告诉我
$(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>