Question

我有一个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; ?>

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

哇噢！最后，我得到它的工作，100％我想要它。所以我使用你的代码把它扔进一个小提琴：https://jsfiddle.net/rockmandew/4Lyofmkh/44/

你会看到我采用了我的方法 - 默认情况下，这些文章都没有显示，并且开头有一个'show'类 - 你也会注意到我改变了你的'cd-（年份））' - 我这样做是因为你需要识别整个文章容器，因为这就是你要隐藏/显示的内容。

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

就像我说的那样，我在这里更改了你的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”，如果它具有通过click（刚才讨论的变量）创建的类，它将遍历所有“.cd-timeline-block”元素，而不是“this” “（表示与所选年份不匹配的所有元素。） - 对于所有这些元素，如果它具有”show“类，则将切换。然后是最后一部分，它采用“this”并循环遍历每一个，如果它没有“show”类，则它切换类“show”，从而显示所需的元素。

最后，show all按钮由以下功能控制：

$('.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/

小提琴现在包含新标记，以便最简单地解决下面评论中标记的更新问题。

Answer 2

我终于明白我过滤了你的年份而不是你的帖子。为了将来参考发布一段实际代码，现在全部用PHP填充。现在，该脚本在年份的年份列表中查找rel属性，将该年份与该班级相匹配＆＃34; cd-year＆＃34;在每个帖子中并根据需要过滤。我删除了帖子中所有多余的部分，就像社交链接一样，因为这个练习不需要它们。

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);
});

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

2 个答案: