模拟点击下一张图片

Posted 2023-02-25

【中文标题】模拟点击下一张图片

【英文标题】：Simulate click on next image

【发布时间】：2014-02-11 19:25:26

【问题描述】：

我正在使用带有左右按钮的 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 时，什么也没有发生。请帮忙。

【参考方案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/

【讨论】：

谢谢！你能解释一下为什么我们在这里使用长度吗？

@Heihachi .length 在这里用于检查.next() 元素是否存在。长度有点像元素的计数。

为什么当我们使用on()时，你选择了body元素然后on()？

@Heihachi 它被称为event delegation，它允许您监听未来可能在运行时添加的元素实例的事件。

【参考方案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!!');
);

Working Example

【参考方案3】：

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

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

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

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