jquery - 使用 JQuery 更改其他部门的事件类

Question

到目前为止我已经写了这段代码-

<div class="yearly-archive">
    <p> YEAR -  <span class="archive-year year-active"> 2014 </span> / 
        <span class="archive-year"> 2013 </span> /
        <span class="archive-year"> 2012 </span> /
        <span class="archive-year"> 2011 </span> /
        <span class="archive-year"> 2010 </span>
    </p>
</div>

<div class="news-container news-active" id="news-2014"></div>

<div class="news-container" id="news-2013"></div>

<div class="news-container" id="news-2012"></div>

<div class="news-container" id="news-2011"></div>

<script>
$('.archive-year').click(function() {
    $('.archive-year').removeClass('year-active');
    $(this).addClass('year-active');
});
</script>

fiddle :http://jsfiddle.net/codestor/C7xj6/2/

我正在尝试实现以下功能:

当我点击 2013 时，news-container 的 news-active 应该切换到 ID 为 news-2013 的部门

需要帮助。

Answer 1

您想要做的事情几乎与您对链接所做的一样……从点击的链接中获取文本并使用它来构建您的 ID 选择器。由于您点击了哪个链接，因此您想使用 $(this).text() 获取链接内的文本。然后你想确保你用 .trim() 删除了文本周围的任何额外空间.现在，您可以通过将字符串与 '#news-1' + <link text value> 连接起来来定位新闻 div。尝试...

$('.archive-year').click(function() {
  $('.archive-year').removeClass('year-active');
  $(this).addClass('year-active');
  $(".news-container").removeClass("news-active");
  $("#news-" + $(this).text().trim()).addClass("news-active");
});

Fiddle