0

我正在尝试调整一个网站，以便用户能够在他们的移动设备上浏览照片库。我尝试通过使用 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 创建为变量声明（在整个 php 文件中不断添加 $main_content，最后它与一堆其他变量一起回显）。

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，所以我写的短脚本可能有很多问题。

抱歉，这篇文章很长，我不确定如何以更简单的方式解释这一点。

如果有人可以通过这种方法帮助我或提出不同的方法，我将不胜感激。

干杯!

4

3 回答 3

2

$写作时使用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>";
?>
于 2013-08-20T10:16:48.777 回答
0

最好的方法是打破 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
?>
于 2013-08-20T10:21:44.353 回答
0

看起来您需要将 javascript 放入$main_content变量中，就像其他代码一样。但老实说，您应该将您的 javascript 与 html/php.xml 分开。

于 2013-08-20T10:20:57.620 回答