jquery - 两次单击以获取 jQuery 中 LI 项的值 - 应为 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 样式的选择时，我会过滤这些项目并将标题添加到跨度。

我遇到的问题是，“志愿服务”需要单击两次才能出现在跨度中。

我已经模拟了一个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);
})

我怎样才能让它一键工作而不是两次？

提前致谢。

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

您可以从 Next Element 获得标题，当您第一次单击时，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);
});