1

私は次のようなナビゲーションを持っています：

<img id="leftButton" />
  <ul id="bullets">
    <li class="style"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
<img id="rightButton" />

私が達成しようとしているのは、右ボタンまたは左ボタンをクリックすると、クラス「スタイル」が最も近い兄弟に移動することです。たとえば、＃rightButtonをクリックすると、スタイルクラスを最初のリストアイテムから2番目のリストアイテムに移動したい、というように続きます。私はこのようなものになりました：

$('#rightButton').click(function() {
    if  ($('#bullets li').hasClass('style')) {
        $('#bullets li').removeClass('style');
        $('#bullets li').next().addClass('style').
        }
});

このような場合、＃rightButtonをクリックすると、最初のリストアイテムからクラス「style」が正しく削除されますが、そのクラスは他のすべてのアイテムに追加されます。

ああ、このめちゃくちゃなコードをお詫びします、私はjQueryの初心者です。

前もって感謝します。

4

3 に答える 3

2

この場合、使用しているセレクターは単一の要素を対象としません。#bullets liidを持つ要素に含まれる5つのリストアイテムすべてを返します#bullets。liCSSクラスが割り当てられているシングルをターゲットにする場合はactive、セレクターをに変更します#bullets li.active。

したがって、コードは次のようになります。

$('#rightButton').click(function() {
    $('#bullets li.active').removeClass('active').next().addClass('active');
});

呼び出しを連鎖させることができ、要素が返されたかどうかをテストする必要がないことに注意してください。

于 2012-05-19T08:33:47.300 に答える
1 
$('#rightButton, #leftButton').on('click', function(e) {
    var cur = $('ul#bullets li.style'),
        next = cur.next('li'),
        prev = cur.prev('li');
    if (e.target.id == 'rightButton') {
        if (next.length == 1) {
            cur.removeClass('style');
            next.addClass('style');
        }
    } else if (e.target.id = 'leftButton') {
        if (prev.length == 1) {
            cur.removeClass('style');
            prev.addClass('style');
        }
    }
});

デモ

于 2012-05-19T08:31:18.437 に答える
0

これは、次を使用して簡単に実現できます。

$('#rightButton').click(function() {
    $('#bullets li.style').removeClass('style').next().addClass('style');
});​
于 2012-05-19T08:35:02.050 に答える