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

Question

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

代码:

<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();

但它不起作用。如果我隐藏它，我如何才能到达下一个对象？

Answer 1

在这一行中:

$('.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/