javascript - 使用与点击的div不匹配的javascript隐藏div，并将正确的div插入页面

我有一个PHP网站，其中显示了2015-2008年发布的博客文章/文章。基本上，在页面顶部，我有带有年份的按钮，而在所有与这些年份相关的博客文章和文章下方，都有这些按钮。我想要一个功能，以便如果用户单击2013，所有其他与2013不匹配的年份的帖子都会消失，并且正确的年份帖子/文章将移至页面顶部，因此用户不必滚动。

这是我的代码，内容是通过控制器加载的，因此页面基本上是通过从数组中获取数据来创建的。

<div class="calendar-key">
<div class="cd-timeline2-img cd-2015" id="btn" ><a href="#2015-1" rel="2015">'15</a></div>
<div class="cd-timeline2-img cd-2014" ><a href="#2014-1" rel="2014">'14</a></div>
<div class="cd-timeline2-img cd-2013" ><a href="#2013-1" rel="2013">'13</a></div>
<div class="cd-timeline2-img cd-2012"><a href="#2012-1" rel="2012">'12</a></div>
<div class="cd-timeline2-img cd-2011" ><a href="#2011-1" rel="2011">'11</a></div>
<div class="cd-timeline2-img cd-2010" ><a href="#2010-1" rel="2010">'10</a></div>
<div class="cd-timeline2-img cd-2009" ><a href="#2009-1" rel="2009">'09</a></div>
<div class="cd-timeline2-img cd-2008" ><a href="#2008-1" rel="2008">'08</a></div>
<div class="cd-timeline2-img cd-2007" ><a href="#2007-1" rel="2007">'07</a></div>

<?php foreach ($article as $slug => $article): ?>

    <div class="cd-timeline-block">
        <div class="cd-timeline-img cd-<?php echo $article['year'] ?>">
            <span class="timelinedate"><?php echo $article['month'] ?><?php echo $article['day'] ?></span>
        </div>
        <div class="cd-timeline-content">
            <a href="<?php echo $article['link'] ?>">
                <h3 class="press_title" id="<?php echo $article['year']  ?>-<?php echo $article['first']  ?>"><?php echo $article['title'] ?></h3>
                <img src="<?php echo $article['image'] ?>" width="100%" height="auto" />
            </a>
            <p><?php echo $article['description'] ?> </p>
            <div class="social-share-buttons article-share-buttons pull-left">
                <a class='social-email' href='<?php echo SocialShareLink::email("", "Check out this article, ".$article['title']." \n\n" .$article['link']); ?>'</a>
                <a class='social-facebook' href='<?php echo SocialShareLink::facebook($article['link']); ?>' target='_blank'></a>
                <a class='social-twitter' href='<?php echo SocialShareLink::twitter("", $article['link']); ?>' target='_blank'></a>
                <a class='social-google' href='<?php echo SocialShareLink::googleplus($article['link']); ?>' target='_blank'></a>
            </div>
            <a href="<?php echo $article['link'] ?>" class="cd-read-more" title="Read More" target="_blank">Read more</a>
        </div>
    </div>

<?php endforeach; ?>

对于每个，基本上都使用一个我在配置文件中具有数据的数组，并填充页面上的文章，无论数组中有多少。

'articles' => [
    'article#1 example' => [
        'description' => "exampletextblablabla",
        'title' => 'article title',
        'link' => '//www.google.com',
        'year' => '2015',
        'month' => 'Jul ',
        'day' => '25',
        'first' => '1', //first article of that year
        'image' => '../../images/example.jpg'
    ],

//more articles in this format

然后我在js上的失败尝试

<script type="javascript">
$('.cd-timeline2-img a').on('click',function(){
    var eq = $(this).index();
    $('cd-timeline-img cd-<?php echo $article['year'] ?>').removeClass('show');
    $('cd-timeline-img cd-<?php echo $article['year'] ?>').eq(eq).addClass('show');
});
</script>

我不太擅长javascript，因此尝试了类似的方法，但没有任何效果。我觉得这是一个简单的小脚本，任何帮助都将非常有用！谢谢。

最佳答案

hoo！最终，我在100％所需的位置运行它。因此，我使用了您的代码并将其扔到小提琴中：https://jsfiddle.net/rockmandew/4Lyofmkh/44/

您会看到我采用了我的方法-默认情况下，文章不显示，并且一开始就带有一类“显示”-您还会注意到我更改了“ cd-（year）”的位置-我这样做是因为您需要标识整个文章容器，因为这就是您要隐藏/显示的内容。

我还添加了“显示全部”按钮，因此用户可以根据需要查看全部。

就像我说的，我在这里更改了HTML标记：

<div class="cd-timeline-block cd-2015 show">
    <!-- Article Year in Div Class below -->
    <div class="cd-timeline-img">

以前是“ cd-timeline-img cd-2015”。除了添加“显示全部”按钮（如果需要）之外，这是您唯一需要对标记进行的更改：

<div class="show-all"><a href="#showall">Show All</a></div>

此外，我将display：none css属性应用于“ .cd-timeline-block”

.cd-timeline-block {
  margin-top:35px;
  display:none;
}

这就是为什么我们使用“ show”类初始化页面的原因：

<div class="cd-timeline-block cd-2015 show">

具有以下样式：

.show {
  display:block;
}

最后，我们深入探讨jQuery。我将发布我使用的工作代码，然后对其进行解释。以下代码用于根据点击年份切换文章：

$('.calendar-key a').each(function() {
  $(this).on('click', function() {
    var x = 'cd-' + $(this).attr('rel');
    $('.cd-timeline-block').each(function() {
      if($(this).hasClass(x)) {
        $('.cd-timeline-block').not(this).each(function() {
            if($(this).hasClass('show')) {
                $(this).toggleClass('show');
            }
        });
        $(this).each(function() {
            if(!$(this).hasClass('show')) {
                $(this).toggleClass('show');
            }
        });
      }
    });
  })
});

如您所见，当单击“ .calendar-key”链接时，单击的链接将基于链接“ rel”产生一个变量-该变量将“ cd-”前缀添加到“ rel”值上。然后，对于每个“ .cd-timeline-block”，如果它具有通过单击创建的类（刚刚讨论的变量），它将循环遍历所有非“ this.cd-timeline-block”元素。 “（表示与所选年份不匹配的所有元素。）-对于所有这些元素，如果具有“ show”类，则将其切换。然后是最后一部分，它取“ this”并在每个循环中循环，如果它没有“ show”类，则切换“ show”类，从而显示所需的元素。

最后，全部显示按钮由以下功能控制：

$('.show-all a').on('click', function() {
  $('.cd-timeline-block').each(function() {
      if(!$(this).hasClass('show')) {
          $(this).toggleClass('show');
      }
  });
});

它是一个相当简单的功能。单击“ .show-all”链接时，它将循环浏览所有“ .cd-timeline-block”元素，如果它们没有“ show”类，则该函数将切换“ show”类。

我知道很多，但希望一切都有意义。同样，这是我为您提供帮助的相关小提琴。

https://jsfiddle.net/rockmandew/4Lyofmkh/44/

让我知道您是否需要其他帮助。

最近更新：

https://jsfiddle.net/rockmandew/4Lyofmkh/46/

小提琴现在包含新的标记，可以最轻松地解决以下注释中标记的更新问题。