Question

我正在尝试调整网站，以便用户可以在移动设备上浏览照片库。我尝试使用JQuery做到这一点。该网站不是由我编写的，所以我无法解释之前程序员对其代码所做的选择。

目前，用户可以通过点击（点击）当前图片来更改图片。这个代码可以在名为home.php的php文件中找到。就是这样：

<?php 
...
$main_content .= "\n        <div class='main_image'>
        <a href='$next_slideURL' style='display:block'>
            <img src='$root/$item_path/$slideFile' alt='$slideCaption from $projectTitle\n [xxxxxxxxxxxxx]' style='max-width:832px; max-height:500px' title='$projectTitle: $slideCaption. \nclick for next slide ($next_slideCaption). '></a>
    </div>\n";
...
?>

要添加滑动功能，我在上面的代码之后添加了以下代码：

echo "<script type='text/javascript'>";
    echo "(function(){
        $(\"div.main_image\").on(\"swipeleft\", swipeleftHandler);
        $(\"div.main_image\").on(\"swiperight\", swiperightHandler);

        function swipeleftHandler(event){
            $.mobile.changePage(\"$next_slideURL\", {transition: \"slideleft\", changeHash: false});
        }

        function swiperightHandler(event){
            $.mobile.changePage(\"$previous_slideURL\", {transition: \"slideright\", changeHash: false});
        }
    });";
    echo "</script>";

虽然我不确定为什么这不起作用，但我有几个可能的原因（不幸的是，这可能都是真的）。

1）由于div class ='main_image'是作为变量声明完成的，因此JQuery行“div.main_image”没有引用（即它不知道main_image是什么）。我不确定为什么div被创建为变量声明（$ main_content一直在整个php文件中添加，最后它与一堆其他变量一起回显）。

2）我需要为JQuery包含以下代码，但我把它放在错误的地方：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

现在我把它放在index.html文件的标题部分。这是错的吗？

3）我之前从未使用过JQuery，因此我编写的短脚本可能有任何问题。

对于长篇文章感到抱歉，我不知道如何以更简单的方式解释这个问题。

如果有人能用这种方法帮助我，或者提出另一种方法，我会很感激。

干杯！

Answer 1

在撰写$

时使用ready function

<?php
    echo "$(function(){
    // ---^--- use $ here
        ....
    ....";
    echo "</script>";
?>

如果 $ conflicts那么你可以使用 jQuery 之类的，

完整代码：

<?php
    echo "<script type='text/javascript'>";
    echo "jQuery(function(){
        jQuery('div.main_image').on('swipeleft', swipeleftHandler);
        jQuery('div.main_image').on('swiperight', swiperightHandler);
        function swipeleftHandler(event){
            $.mobile.changePage('".$next_slideURL."', {transition: 'slideleft', changeHash: false});
        }

        function swiperightHandler(event){
            $.mobile.changePage('".$previous_slideURL."', {transition: 'slideright', changeHash: false});
        }
    });";
    echo "</script>";
?>

Answer 2

看起来您需要将javascript放在$main_content变量中，就像其他代码一样。但说实话，你应该从html / php中分离你的javascript。

Answer 3

最好的方法是打破php标签

并将此(function ()更改为$(function ()

<?php
 //php code
?>
<script type='text/javascript'>
$(function () {
    $("div.main_image").on("swipeleft", swipeleftHandler);
    $("div.main_image").on("swiperight", swiperightHandler);

    function swipeleftHandler(event) {
        $.mobile.changePage("$next_slideURL", {
            transition: "slideleft",
            changeHash: false
        });
    }

    function swiperightHandler(event) {
        $.mobile.changePage("$previous_slideURL", {
            transition: "slideright",
            changeHash: false
        });
    }
}); 
</script>;
<?php
//php code
?>

将JQuery集成到php文件中

3 个答案: