Question

我发现这个脚本隐藏并显示内容，原始代码仅用于两个项目，并在它们之间切换。我想用很多项目来完成这项工作而不需要切换它们;当我点击＆＃34; news0＆＃34;当我点击＆＃34; news1＆＃34;我只想显示新闻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>

Answer 1

说明

此代码过于复杂。在您的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>

隐藏和显示多个项目

1 个答案:

说明

实施例