jquery - jQuery で LI アイテムの値を取得するための 2 回のクリック - 1 回かかるはずです

Question

jQueryの問題があります。

次のように HTML リストを設定しています。

<ul class="areas">
 <li title="Volunteering">Volunteering</li>
 <li title="Partnership &amp; Support">Partnership &amp; Support</li>
 <li title="Business Services">Business Services</li>
</ul>

ユーザーが外側の div スタイルの選択をクリックすると、これらの項目をフィルタリングしてタイトルをスパンに追加します。

私が抱えている問題は、「ボランティア」がスパンに表示されるのに2回クリックする必要があることです。

私はこれのjsFiddleをモックアップしました

私のjQueryは次のようになります：

$('ul.areas').css('display', 'none');

$('.styled-select').click(function()
{
    var cur = $('.areas li.current');
    next = cur.next('li');

    var value = cur.attr('title');

    if (next.length === 0) {  // wrap if necessary
        next = $('.areas li:first');
    }

    cur.removeClass('current');  // move the current class
    next.addClass('current');

    $('.service-area').html(value);
})

2 回ではなく 1 回のクリックで動作させるにはどうすればよいですか?

前もって感謝します。

Answer 1

クラスにli要素があり、正常に動作するようにマークアップを変更しました。current

http://jsfiddle.net/355Qk/1/

<ul class="areas">
    <li class="current" title="Volunteering">Volunteering</li>
    <li title="Partnership &amp; Support">Partnership &amp; Support</li>
    <li title="Business Services">Business Services</li>
</ul>

それがあなたのやりたいことではない場合、クラスがまだ存在しない場合はcurrent、最初にクラスを動的に追加できます。li

Answer 2

次の要素からタイトルを取得できます。最初にクリックしたときは curr は何もありません。

ここにフィドルがあります

http://jsfiddle.net/355Qk/3/

if (next.length === 0) {  // wrap if necessary
                next = $('.areas li:first');

            }

            var value = next.attr('title');

Answer 3

これを試すこともできます：

var li = $('.areas li.current');
var cur = li.length ? li : $('.areas li:first').addClass('current');
next = cur.next('li');

デモはこちら

Answer 4

少し単純化します：

$('.styled-select').click(function () {
    var cur = $('.areas li.current').length === 0 ? $('.areas li').eq(0) : $('.areas li.current').eq(0).removeClass('current');
    var next = cur.next('li').length ? cur.next('li').addClass('current') : cur.next('li').eq(0).addClass('current');
    var value = cur.attr('title');

    $('.service-area').html(value);
});