【问题标题】:Combining Toggle and Click functions with JQuery将 Toggle 和 Click 函数与 JQuery 结合使用
【发布时间】:2011-01-12 21:56:45
【问题描述】:

我的网站上有一个幻灯片库。有一个来自我正在使用的 JQuery 插件的脚本,当我单击锚点时它会执行一些功能。我想要做的是看看我是否可以让暂停按钮在单击时变为悬停状态,然后如果再次单击它又变回正常状态。

我尝试这样做只是说如果 img.src == 正常状态,然后在单击时将其更改为悬停状态。当然没有用,因为当你将鼠标悬停在它上面时,它不再处于正常状态。希望这是有道理的。这是我的代码:

<a id="galleryPause" href="#">
<img src="images/galleryPause.jpg" onmouseover="this.src='images/galleryPauseHover.jpg'" onmouseout="this.src='images/galleryPause.jpg'" style="margin-left:-4px;" />
</a>

我基本上想保留现有的悬停功能并向其添加点击功能,将默认图像更改为悬停状态并返回。这是为了让用户知道画廊已暂停。感谢您对此的任何帮助!

更新: 这是我正在使用的插件的代码。有没有办法我可以劫持这段代码来让它做我想做的事?

插件脚本链接:http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

我的页面&lt;head&gt;...&lt;/head&gt;中的代码:

<script type="text/javascript">
var autoPlayTime=5000;
    autoPlayTimer = setInterval( autoPlay, autoPlayTime);
    function autoPlay(){
        Slidebox('next');
    }
    $('#bannerWrapper .thumbs .next').click(function () {
        Slidebox('next','next');
    });
    $('#bannerWrapper .thumbs .previous').click(function () {
        Slidebox('previous','next');
    });
});
//slide page to id
function Slidebox(slideTo,autoPlay){
    var animSpeed=1000; //animation speed
    var easeType='easeInOutExpo'; //easing type
    var sliderWidth=$('#bannerWrapper').width();
    var leftPosition=$('#bannerWrapper .container').css("left").replace("px", "");
    $("#bannerWrapper .content").each(function (i) {
        totalContent=i*sliderWidth; 
        $('#bannerWrapper .container').css("width",totalContent+sliderWidth);
    });
    if( !$("#bannerWrapper .container").is(":animated")){
        if(slideTo=='next'){ //next
            if(autoPlay=='stop'){
                clearInterval(autoPlayTimer);
            }
            if(leftPosition==-totalContent){
                $('#bannerWrapper .container').animate({left: 0}, animSpeed, easeType); //reset
            } else {
                 $('#bannerWrapper .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
            }
        } else if(slideTo=='previous'){ //previous
            if(autoPlay=='stop'){
                clearInterval(autoPlayTimer);
            }
            if(leftPosition=='0'){
                $('#bannerWrapper .container').animate({left: '-'+totalContent}, animSpeed, easeType); //reset
            } else {
                $('#bannerWrapper .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
            }
        } else {
            var slide2=(slideTo-1)*sliderWidth;
            if(leftPosition!=-slide2){
                clearInterval(autoPlayTimer);
                $('#bannerWrapper .container').animate({left: -slide2}, animSpeed, easeType); //go to number
            }
        }
    }
}
</script>

【问题讨论】:

    标签: jquery click hover toggle


    【解决方案1】:

    如果您在代码中跟踪单独的“被点击”状态,则可以使用它来确定点击状态,而不是试图劫持悬停状态。然后在悬停时,您可以检查图库是否已被单击。如果是这样,绕过正常的悬停事件,直到发生未来的点击。所以点击状态会暂停/恢复幻灯片。

    【讨论】:

    • 是的...我一直在尝试找出已经存在的点击功能的代码,但到目前为止一直没有成功。我也会用插件的代码更新帖子。
    • 图库是动态创建的吗?如果是这样,您是否尝试过 ('#bannerWrapper .thumbs .next').live("click", ... 而不是 ('#bannerWrapper .thumbs .next').click()?
    • 是的...画廊是使用 JSON 动态填充的。这种改变能让我做什么?
    • click() 只会在第一个 HTTP 请求时挂钩到您的 DOM 中的内容。 live() 将挂钩在初始 HTTP 加载后添加到 DOM 中的任何元素。见api.jquery.com/live
    • 酷...我得去看看。对我最初关于暂停按钮的问题有什么想法吗?或者这就是你所说的“现场”?
    猜你喜欢
    • 2015-05-21
    • 2010-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多