1

クリック可能なイベントを作成して、＃nextがクリックされたときに、この場合は2000-2001などがアンダースコア付きのbodyタグのクラスに送信されるようにします。body class ="_2000-2001"。

現在の日付ではクラスが選択されており、＃nextがクリックされるたびに、選択されたクラスがそのタグに移動します。

私が理解する必要があるのは、ul＃dates li a.selectedの代わりに、クリックするたびにリスト内の次のliタグを取得する方法です。

.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;
    });
});
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＃datesli a.selected」セレクターを使用して、li要素内のアンカータグを選択しました。したがって、parent（）呼び出しを使用して1ステップ上に移動する必要があり、next（）は次のli要素に移動します。子要素のhtmlが必要なため、$。children（）。html（）;と呼びます。li内に複数の要素がある場合は、$。children（）。first（）。html（）;のようなことを行う必要があります。

于 2012-10-09T14:46:19.123 に答える