jquery 模拟点击下一个图像

pxiryf3j  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(126)

我做了一些简单的滑块与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时,什么也没有发生。请帮帮我

sz81bmfz

sz81bmfz1#

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

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

carvr3hs

carvr3hs2#

这应该涵盖了你所有的基地。。

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

jk9hmnmh

jk9hmnmh3#

首先,live已被弃用,您应该只使用on,请参阅此处http://api.jquery.com/live/
要触发单击,只需调用click()

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

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

相关问题