1

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

当前日期已选择班级，每次单击#next 时，所选班级都会移动到该标签。

我需要弄清楚的是如何在每次点击时获取列表中的下一个 li a 标签，而不是 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>

查询：

$('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;
    });
});
4

2 回答 2

0

你可以使用类似的东西：

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());
   }
});
于 2012-10-09T14:46:08.527 回答
0

改变

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

至

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

工作小提琴。

编辑：使用“ul#dates li a.selected”选择器，我们选择了 li 元素内的锚标记。因此，您必须使用 parent() 调用向上移动一步，然后 next() 会将您带到下一个 li 元素。因为你想要我们称之为 $.children().html(); 的子元素的 html。如果 li 中有多个元素，则必须执行 $.children().first().html(); 之类的操作。

于 2012-10-09T14:46:19.123 回答