Question

我无法让我的JQuery滑动事件发挥作用，它在移动设备上什么都不做。我不确定为什么因为我觉得我把所有东西都正确放入了。请帮忙！我真的不确定如何修复此错误。

<body>

<div class="gridContainer clearfix">
    <br>

    <div class="frame-2"><img src="../../text_pages/Artist_Stm-web-resources/image/Image_002.png" alt="Image_002.png" width="262" height="9" class="frame-1" />
    </div>
    <div>
        <p class="Biblio-Heading para-style-override-4"> <span class="char-style-override-1">MWGallegos</span></p>
    </div>
    <nav class="menu-item">
        <div>
            <h4><a href="../../index.html">HOME</a></h4>
        </div>
    </nav>
    <br>
    <br>

    <div id="LayoutDiv1">
        <a href="#" id="btn-back"><i class="fa fa-angle-left"></i></a>
        <a href="#" id="btn-forward"><i class="fa fa-angle-right"></i></a>

        <!-- InstanceBeginEditable name="Image Area" --><img class="resize" src="../images/myFull/The_Seeress.jpg">
        <alt="Seeress">
            <!-- InstanceEndEditable -->
    </div>
    <div>
        <br />
        <p>
            <br>
        </p>
    </div> 
    <div id="LayoutDiv2"> Margaret W Gallegos: 
        <!-- InstanceBeginEditable name="Text Area" --><em>The Seeress</em>, 2014, oil on panel, 12x9 in, 31x23 cm
        <!-- InstanceEndEditable -->
    </div>
    <div id="LayoutDiv4">
        <a href="page5.html"><img src="../images/mytinythumbs/The_Seeress.jpg" height="36px" alt="image5"></a>
        <a href="page8.html"><img src="../images/mytinythumbs/Copperhead-005.jpg" height="36px" alt="image7"></a>
        <a href="page31.html"><img src="../images/mytinythumbs/Living-in-Interesting-Times.jpg" height="36px" alt="image7"></a>
        <a href="page25.html"><img src="../images/mytinythumbs/Silvia.jpg" height="36px" alt="image7"></a>
        <a href="page36.html"><img src="../images/mytinythumbs/Winter_Skater.jpg" height="36px" alt="image7"></a>
        <a href="page37.html"><img src="../images/mytinythumbs/Woman_of_Sorrows.jpg" height="36px" alt="image7"></a>
        <a href="page24.html"><img src="../images/mytinythumbs/Green_Jeff.jpg" height="36px" alt="image7"></a>
        <a href="page21a.html"><img src="../images/mytinythumbs/Sketching_in_the_Park.jpg" height="36px" alt="image7"></a>
        <a href="page17.html"><img src="../images/mytinythumbs/Madu-sharp-3-002.jpg" height="36px" alt="image14"></a>
        <a href="page22.html"><img src="../images/mytinythumbs/Fear_and_Resistance.jpg" height="36px" alt="image7"></a>
        <a href="page19.html"><img src="../images/mytinythumbs/Woman_with_Basket_and_Child.jpg" height="36px" alt="image7"></a>
        <a href="page29.html"><img src="../images/mytinythumbs/La_Manita_Mamita.jpg" height="36px" alt="La Manita"></a>
        <a href="page40.html"><img src="../images/mytinythumbs/Wounded_Jester.jpg" height="36px" alt="image7"></a> 
        <a href="page38.html"><img src="../images/mytinythumbs/Woman_on_the_Edge.jpg" height="36px" alt="image7"></a> 
        <p>&nbsp;</p>
        <p> <font font size="1">&copy 2000-2016, Margaret W Gallegos, All Rights Reserved</font></p>
        <p>
            <p>&nbsp;</p> 
        </p>
    </div>
</div>


<!--IGNORE THESE< THEY ARE LINKS TO THE JAVASCRIPT FILES-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="../assets/index.js" type="text/javascript"></script>

和javascript

$(document).ready(function () {
    var mainImg = $("#LayoutDiv1").children("img").attr("src").replace("myFull", "mytinythumbs");

    if ($("#LayoutDiv4").children('img[src="' + mainImg + '"]').parent("a").is(':first-child')) {
        var prevLink = $("#LayoutDiv4").children("a:last").attr("href");
        $("#btn-back").attr("href", prevLink);
    } else {
        var prevLink = $("#LayoutDiv4").find('img[src="' + mainImg + '"]').parent("a").prev().attr("href");
        $("#btn-back").attr("href", prevLink);
    }

    if ($("#LayoutDiv4").children('img[src="' + mainImg + '"]').parent("a").next().is("p")) {
        var nextLink = $("#LayoutDiv4").children("a:first").attr("href");
        $("#btn-forward").attr("href", nextLink);
    } else {
        var nextLink = $("#LayoutDiv4").find('img[src="' + mainImg + '"]').parent("a").next().attr("href");
        $("#btn-forward").attr("href", nextLink);
    }
});

$(document).on('pageinit', function (event) {
    $("#LayoutDiv1").swiperight(function () {
        if ($("#LayoutDiv4").children('img[src="' + mainImg + '"]').parent("a").next().is("p")) {
            var nextLink = $("#LayoutDiv4").children("a:first").attr("href");
            $.mobile.changePage(nextLink);
        } else {
            var nextLink = $("#LayoutDiv4").find('img[src="' + mainImg + '"]').parent("a").next().attr("href");
            $.mobile.changePage(nextLink);
        }
    });
});

$(document).on('pageinit', function (event) {
    $("#LayoutDiv1").swipeleft(function () {
        if ($("#LayoutDiv4").children('img[src="' + mainImg + '"]').parent("a").prev().is("br")) {
            var prevLink = $("#LayoutDiv4").children("a:last").attr("href");
            $.mobile.changePage(prevLink);
        } else {
            var prevLink = $("#LayoutDiv4").find('img[src="' + mainImg + '"]').parent("a").prev().attr("href");
            $.mobile.changePage(prevLink);
        }
    });
});

JQuery滑动事件无法正常工作

0 个答案: