javascript - 通过单击另一个对象来更改显示的<li>

我想通过单击箭头来制作带有更改信息的简单信息板。

码：

<ul id="wybieraniekamienia">
    <li class="wybranykamien">Wcześniejszy kamień<br>Uruchomienie produkcji modelu<br><br>11.09.2013</li>
    <li class="wybranykamien kamiennumberone">"Zephyr"<br>Uruchomienie produkcji modelu<br><br>11.09.2013</li>
    <li class="wybranykamien">Późniejszy kamień<br>Uruchomienie produkcji modelu<br><br>11.09.2013</li>
</ul>

kamiennumberone被选中（默认显示信息），现在通过单击箭头，我想更改next（）或prev（）的信息。

jQuery：

$('#strzalkaprawa').click(function(){
    $('.kamiennumberone').toggle();
    $('.kamiennumberone').next(li).toggle();
});

在隐藏它之前，我还尝试了下一个对象：

var nextone = $('.kamiennumberone').next(li);
$('.kamiennumberone').toggle();
$(nextone).toggle();

但它不起作用。如果将其隐藏，我如何到达下一个目标？

最佳答案

在这一行：

$('.kamiennumberone').next(li).toggle();

li是变量名。您打算使用一个字符串：

$('.kamiennumberone').next('li').toggle();

http://jsfiddle.net/mblase75/RWW5q/



如果要遍历整个列表，则需要使用.toggleClass()而不是.toggle()（以及一些额外的代码）：

$('#strzalkaprawa').click(function () {
    $a = $('.kamiennumberone').toggleClass('kamiennumberone');
    $b = $a.next('li');
    if (!$b.length) { // we went past the end of the list
        $b = $a.siblings().first();
    }
    $b.toggleClass('kamiennumberone');
});

http://jsfiddle.net/mblase75/6Qru4/