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-styled select时，我会过滤这些项目并将标题添加到范围。

我遇到的问题是，“Volunteering”需要两次点击才能显示在该范围内。

我已经嘲笑了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

你可以从下一个元素中获取标题，当你第一次点击它时，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');

DEMO HERE

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

两次点击以获取jQuery中LI Item的值 - 应该为1

4 个答案: