模拟单击下一个图像

Question

我正在用jQuery制作一些简单的滑块，其中有左、右两个按钮(在这个按钮上，我想模拟单击下一个图像，用类g拇指，并将类活动设置为它)

HTML：

<div class="gleft"></div>
<div class="gright"></div>
    <div class="gal-thumbs">
    <a href="#" class="gthumb active"><img src="/sites/zum.kz/themes/lounge/gal/pub/pub1.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub2.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub3.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub4.jpg"></a>
    <a href="#" class="gthumb"><img src="/sites/555.kz/themes/lounge/gal/pub/pub5.jpg"></a>
    </div>

联署材料：

    // change background on arrow click
    var current_img = $('.gthumb.active');

    $('.gleft').live('click', function() {
        current_img.next().trigger('click').addClass('active');
    });

当您单击.gleft时，它应该模拟单击带有.active类的图像中的下一个图像。但是，当我单击.gleft时，什么都不会发生。请帮帮忙。

Answer 1

这可能不是创建滑块的最佳方法，但就修复您已经拥有的内容而言，这应该足以让您开始工作。

$('body').on('click','.gleft', function() {
    if($('.gthumb.active').next().length > 0){
        $('.gthumb.active').removeClass('active').next().trigger('click').addClass('active');
    }
});
$('body').on('click','.gright', function() {
    if($('.gthumb.active').prev().length > 0){
        $('.gthumb.active').removeClass('active').prev().trigger('click').addClass('active');
    }
});

演示：http://jsfiddle.net/T9uY8/

Answer 2

这应该包括你所有的基地..。

// Click to go right
$('body').on('click', '.gright', function() {
    if($('a.active').next().length != 0){
    $('a.active').removeClass('active').next().addClass('active').trigger('click');
    }
});

// Click to go left
$('body').on('click', '.gleft', function() {
    if($('a.active').prev().length != 0){
    $('a.active').removeClass('active').prev().addClass('active').trigger('click');
    }
});

// Just to show the click is being triggered
$('body').on('click', '.gthumb', function(){
    alert('I have been clicked!!');
});

工作实例

Answer 3

首先，live已被废弃，您应该只使用on，参见这里的http://api.jquery.com/live/

要触发单击，只需调用click()

var current_img = $('.gthumb.active');

$('.gleft').on('click', function() {
    current_img.next().click().addClass('active');
});