Question

我有这个拇指列表

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

我还有导航箭头，上一页和下一页的课程'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 code：

<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/

jQuery从选中获得上一个或下一个项目

2 个答案:

的jQuery

CSS