0

ユーザーがモバイル デバイスでフォト ギャラリーをスワイプできるように、Web サイトを微調整しようとしています。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 を使用したことがないので、私が書いた短いスクリプトについて、いくつもの間違いがあるかもしれません。

長い投稿で申し訳ありませんが、これをより簡単な方法で説明する方法がわかりません。

誰かがこのアプローチで私を助けてくれるか、別のアプローチを提案してくれれば幸いです。

乾杯！

4

3 に答える 3

2

$書きながら使うready function

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

$ の場合、次のようにjQueryconflictsを使用できます。

完全なコード:

<?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

$main_content他のコードと同様に、javascript を変数に入れる必要があるようです。しかし、正直に言うと、javascript を html/php から分離する必要があります。

于 2013-08-20T10:20:57.620 に答える