1

最初のページには、クリックできるリンク付きの画像があります。

<div style="width: 97px; height: 130px;">
<a href="objects_lost.html?obj=images/dog.png">
<div>
<img src="images/dog.png" alt="" style="width: 100%; height: 100%;">
<p style="color: black; margin-top: 0px;">DOG</p>
</div>
</a>
</div>

クリックすると、クリックした画像を表示する新しいページが開きます。ただし、1回のリフレッシュ後にのみ機能します。

    <img src="" id="image"/>        
    <script type="text/javascript">
        function whatImg() {
            var str = getUrlVars()["obj"];
            document.getElementById('image').src = str;
        }

        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
                {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
                }
            return vars;
            }
        whatImg();
    </script>

助けはありますか？JQuery Mobile を使用しています

4

2 に答える 2

3

ハッシュが変更された場合、スクリプトは再起動しません。次のようなイベント リスナーを追加する必要があります。

$(window).on("hashchange",function() {
  whatImg();
});
于 2013-02-22T18:56:17.763 に答える
0

問題は、ページの読み込みが完了する前にJavaScriptが実行されていることです。更新時に、ページがローカルキャッシュから読み込まれ（つまり、はるかに高速に）、スクリプトが実行される前に画像要素の準備が整います。ローカルサーバーからコードを実行する場合、HTMLの読み込みが速いため、最初の試行でコードが機能することに気付くかもしれません。

正しい修正は、ロード後にコードを実行することです。jQueryでは、次のようにします。

$( function() {
    whatImg();
});

これは、多かれ少なかれ、次の標準的なjQueryショートカットです。

$(window).load( function () {
    whatImg();
});

最初のページの読み込み時に起動するhashchangeため、使用を提案する回答が機能することに注意してください。hashchange実際には、URLにハッシュはありません。正しい解決策は、ロード後にスクリプトを実行することです。

于 2013-02-22T19:10:25.520 に答える