Question

尝试创建一个可点击的事件，以便在单击#next时，在这种情况下将2000-2001等的html发送到带有下划线的body标签上的类。 body class =“_ 2000-2001”。

当前日期已选择类，每次单击#next时，所选类将移动到该标记。

我需要弄清楚的是如何在每次点击时在列表中获取下一个li标签，而不是ul＃dates li a.selected。

我应该使用.next（）函数吗？

<ul id="dates">                 
    <li><a href="#1970-1974" class="selected">1970-1974</a></li>        
    <li><a href="#1974-1980">1974-1980</a></li>         
    <li><a href="#1980-1992">1980-1992</a></li>         
    <li><a href="#1992-2000">1992-2000</a></li>         
    <li><a href="#2000-2001">2000-2001</a></li>     
    <li><a href="#2001-2004">2001-2004</a></li>         
    <li><a href="#2004-2006">2004-2006</a></li>         
    <li><a href="#2006-2007">2006-2007</a></li>         
    <li><a href="#2007-2008">2007-2008</a></li>         
    <li><a href="#2009-2011">2009-2011</a></li>     
    <li><a href="#Present">Present</a></li>
</ul>

<a href="#" id="next">+</a>
<a href="#" id="prev">-</a>

JQuery的：

$('a#next').click(function() {
    var htmlStr = $('ul#dates li a.selected').html();
    console.log(htmlStr);
    $('body').attr('class', function() {
        return '_' + htmlStr;
    });
});

$('a#prev').click(function() {
    var htmlStr = $('ul#dates li a.selected').html();
    $('body').attr('class', function() {
        return '_' + htmlStr;
    });
});

Answer 1

您可以使用以下内容：

var $cur = '';
var $next = '';
var $prev = '';
var htmlStr = '';

$("#next").on('click', function () {
   $cur = $("#dates li a.selected");
   $next = $cur.parent().next().find('a');
   if ($next.length > 0) {
      $cur.removeClass('selected');
      $next.addClass('selected');
      $('body').attr('class', '_' + $next.text());
   }
});


$("#prev").on('click', function () {
   $cur = $("#dates li a.selected");
   $prev = $cur.parent().prev().find('a');
   if ($prev.length > 0) {
      $cur.removeClass('selected');
      $prev.addClass('selected');
      $('body').attr('class', '_' + $prev.text());
   }
});

Answer 2

更改

$('ul#dates li a.selected').html();

到

$('ul#dates li a.selected').parent().next().children().html();

工作fiddle。

编辑：使用“ul #date li a.selected”选择器，我们在li元素中选择了锚标记。因此，您必须使用parent（）调用向上移动一步，而next（）将您带到下一个li元素。因为你想要子元素的html，我们称之为$ .children（）。html（）;.如果li里面有多个元素，你将需要像$ .children（）。first（）。html（）;。

这样的东西。

如何获取列表中的下一个项目

2 个答案: