Question

我正在使用带有左，右按钮的jQuery创建一些简单的滑块（在按钮上单击我想模拟单击gthumb类的下一个图像并将类设置为活动）

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>

JS：

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

这应该涵盖你所有的基地......

// 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!!');
});

Working Example

Answer 2

它可能不是创建滑块的最佳方式，但就修复已经存在的内容而言，这应该足以让您入门。

$('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 3

首先，live已被弃用，您应该只使用on，请参阅此处http://api.jquery.com/live/

要触发点击，您只需拨打click()

即可

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

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

模拟单击下一个图像

3 个答案: