使用与点击的 div 不匹配的 javascript 隐藏 div 并将正确的 div 推上页面

Question

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

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

<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; ?>

for each 基本上采用我在配置文件中的数组和数据，并填充页面上的文章，无论数组中有多少。

'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，所以我尝试了类似的方法，但没有任何效果。我觉得这是一个简单的小脚本，任何帮助都会很棒！谢谢。

Answer 1

我终于明白我过滤的是你的年份列表而不是你的 post。为了将来参考 post 一段实际代码，现在全是 php 位。现在，该脚本在您的年份列表中查找该年份的 rel 属性，将该年份与每个 post 中的 class "cd-year" 匹配，并根据需要进行过滤。我删除了 post 中所有多余的部分，例如社交链接，因为本练习不需要它们。

http://jsfiddle.net/1dyocexe/2/

//this is where you'd have your <?php echo $article['year'] ?> set the current year
var year = 2014;
getPosts(year);

function getPosts(year) {
    $(".cd-timeline-block").find("div").each(function (i) {
        var elm = $(this);
        var cdYear = "cd-" + year;
        var use = elm.hasClass(cdYear);

        if (use === true) {
            elm.show();
        } else {
            elm.hide();
        }

    });
}

$(".calendar-key div a").on("click", function () {
    var year = $(this).attr("rel");
    getPosts(year);
});

Answer 2

哇哦！最后，我让它工作了，并且 100% 在我想要的地方。所以我使用了你的代码并将其放入 Fiddle: https://jsfiddle.net/rockmandew/4Lyofmkh/44/

你会看到我采用了我的方法 - 默认情况下，文章显示 none 并且开始时有 class of 'show' - 你也会请注意，我更改了 'cd-(year)' 的位置 - 我这样做是因为您需要识别整个文章容器，因为这就是您的 hiding/showing.

我还添加了一个 'Show All' 按钮，因此用户可以根据需要查看所有内容。

就像我说的那样，我在这里更改了您的 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"。这是您需要对标记进行的唯一更改，除了添加 "show all" 按钮（如果需要）：

<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" class 初始化页面的原因：

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

其中有以下样式：

.show {
  display:block;
}

最后，我们进入了正题，jQuery。我将 post 我使用的工作代码，然后对其进行解释。以下代码是根据点击的年份切换文章：

$('.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”link 时，单击的 link 将根据 link 生成一个变量 "rel" - 变量将 "cd-" 前缀添加到 "rel" 值上。然后，对于每个“.cd-timeline-block”，如果它具有通过单击创建的 class（刚刚讨论的变量），它将循环遍历所有“.cd-timeline-block”元素't "this"（表示与所选年份不匹配的所有元素。）- 对于所有这些元素，如果它具有 "show" class，它将被切换。然后是最后一部分，它采用 "this" 并循环遍历每个，如果它没有 class "show"，则它切换 class "show"，从而显示所需的元素。

最后，show all 按钮由以下函数控制：

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

这是一个相当简单的函数。单击“.show-all”link 时，它会循环遍历所有“.cd-timeline-block”元素，如果它们没有 "show" class, 该函数将切换 "show" class.

我知道很多，但希望这一切都有意义。同样，这是我为帮助您而制作的相关 Fiddle。

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

如果您需要任何进一步的帮助，请告诉我。

最新更新：

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

Fiddle 现在包含新标记，用于最简单地解决下面评论中标记的更新问题。

使用与点击的 div 不匹配的 javascript 隐藏 div 并将正确的 div 推上页面

hiding divs using javascript that don't match the clicked div and pushing correct div up the page

javascript

php

jquery

show-hide