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>

当您单击它时，会打开一个显示您单击的图像的新页面。但它只在一次刷新后有效。

    <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 移动

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 回答