Question

我是新的JQuery开发人员！我创建了一个简单的 jQuery滑块。它适用于桌面浏览器，但不适用于移动设备。当我点击下一个和前时，图片应该会改变！在移动设备上，页面重新加载，从不显示下一个图像

我的Jquery App

$('#n').click(function(){
        var displayedImg = '';
        $('img').each(function(){
            if($(this).css('display') == 'inline'){
                displayedImg = $(this);
            }
        }); // end of each
        if(displayedImg.attr('title') == 1) {
            displayedImg.toggleClass("SS");
            $("img").eq(1).toggleClass("SS");
        } else if (displayedImg.attr('title') == 2) {
            displayedImg.toggleClass("SS");
            $("img").eq(2).toggleClass("SS");
        } else if  (displayedImg.attr('title') == 3){
            displayedImg.toggleClass("SS");
            $("img").eq(0).toggleClass("SS");

        } 

    });

    $('#p').click(function(){
        var displayedImg = '';
        $('img').each(function(){
            if($(this).css('display') == 'inline'){
                displayedImg = $(this);

            }
        }); // end of each

        if(displayedImg.attr('title') == 1) {
            displayedImg.toggleClass("SS");
            $("img").eq(2).toggleClass("SS");
        } else if (displayedImg.attr('title') == 2) {
            displayedImg.toggleClass("SS");
            $("img").eq(0).toggleClass("SS");
        } else if  (displayedImg.attr('title') == 3){
            displayedImg.toggleClass("SS");
            $("img").eq(1).toggleClass("SS");   
        }
    });

HTML 的

        <img src='0.jpg' style="width:300px" title="1">
        <img src='1.jpg' style="width:300px" class="SS" title="2">
        <img src='2.jpg' style="width:300px" class="SS" title="3"><br />
        <a id='p' href="#">pre</a>
        <a id='n' href="#">next</a><br />

我在主持人http://sete.ir/en/

上传了这段代码

更新

我在联想A300上使用chrome 40，Android 4.2.2

jQuery滑块不适用于移动设备

0 个答案: