javascript - jQuery 从选定的项目中获取上一个或下一个项目

Question

我有这个大拇指清单

<ul>
   <li class='thumb'></li>
   <li class='thumb chosen'></li>
   <li class='thumb'></li>
   <li class='thumb'></li>
</ul>

我也有导航箭头，prev 和 next 类“next-image”和“prev-image”。当我点击导航箭头时，我想在上一个或下一个拇指上触发点击事件。

我如何从选择类的拇指中定位上一个或下一个拇指。

$('.prev-image').click( function() {
    $('.thumb.chosen').prev().trigger('click');

});
$('.next-image').click( function() {
    $('.thumb.chosen').next().trigger('click');
});

这样，它将搜索选择类的以下兄弟，但我需要它从选择类的拇指中搜索上一个或下一个拇指。

Answer 1

class为您的属性添加引号：

<ul>
   <li class="thumb"></li>
   <li class="thumb chosen"></li>
   <li class="thumb"></li>
   <li class="thumb"></li>
</ul>

我猜这chosen被浏览器解释为另一个属性。

jQuery

$('.prev-image').click( function() {
    $('.thumb.chosen').prev().trigger('click');

});
$('.next-image').click( function() {
    $('.thumb.chosen').next().trigger('click');
});

$(".thumb").click(function () {
    $(".thumb").removeClass("chosen");
    $(this).addClass("chosen");
});

CSS

.thumb {
    width: 100px;
    height: 100px;
    background: blue;
    margin: 5px;
}

.chosen {
    background: red !important;
}

JSFIDDLE

Answer 2

这里可以触发事件如下

HTML 代码：

<div class="prev-image">prev</div>
<div class="next-image">next</div>
<ul>
   <li class='thumb'>1</li>
   <li class='thumb chosen'>2</li>
   <li class='thumb'>3</li>
   <li class='thumb'>4</li>
</ul>

jQuery：

// prev thumb trigering
$('.prev-image').click( function() {  
    var element = $('.thumb.chosen');

    $('.thumb.chosen').prev().trigger('click');
    $('.thumb.chosen').prev().addClass("chosen");
    element.removeClass("chosen"); 
});

// next thumb trigering
$('.next-image').click( function() { 
    var element = $('.thumb.chosen');

    $('.thumb.chosen').next().trigger('click');
    $('.thumb.chosen').next().addClass("chosen");
    element.removeClass("chosen");     
});

// trigger on click .thumb
$('.thumb').click(function() {
    var value = $(this).text();
    alert("triggered " + value);
});

CSS：

.chosen { color: red; }

在这里实现 http://jsfiddle.net/jaJeD/