2

我正在尝试使此代码正常工作。如果 URL 中有#leaf，那么标签会更新为显示 image2.png。我不确定我做错了什么。

<script type="text/javascript">
$("#image").show("fast") {
  // Which anchor is being used?
  switch(window.location.hash) {
     case "#leaf":
       window.location.href = image1.png
     break;
     case "#carrot":
       window.location.href = image2.png
     break;
  }
});
</script>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />

PS：我愿意接受更好的方法来实现这一点。刚刚尝试了以下但仍然无法正常工作。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$("#image").show("fast", function() {
    // Which anchor is being used?
    switch(window.location.hash) {
    case "#leaf":
        $(this).attr('src', 'image1.png');
        break;
    case "#carrot":
        $(this).attr('src', 'image2.png');
        break;
  }
});
</script>
</head>
<body>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />
</body>
</html>
4

3 回答 3

2

尝试这个：

<script type="text/javascript">
$("#image").show("fast", function() {
    // Which anchor is being used?
    switch(window.location.hash) {
    case "#leaf":
        $(this).attr('src', 'image1.png');
        break;
    case "#carrot":
        $(this).attr('src', 'image2.png');
        break;
  }
});
</script>
<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<img id="image" />

设置window.location.href设置当前文档的位置。您需要在标签src上设置属性。img此外，您需要用引号将字符串括起来（即，"image1.png"而不是image1.png），否则 JavaScript 解释器会抛出错误。

此外，该show方法的第二个参数是一个函数。正如@Phil-R 指出的那样，您没有正确的语法。

于 2013-08-12T01:36:52.557 回答
1

另一种方法是在 HTML 中声明什么意思。

<a href="#leaf">Leaf</a>
<a href="#carrot">Carrot</a>
<div>
<img data-hash="leaf" src="leaf.jpg" />
<img data-hash="carrot" src="carrot.jpg" />
</div>

JavaScript 然后只查找具有匹配data-hash属性的图像。

function updateImage(){
  var hash = window.location.hash.slice(1);
  var selector = '[data-hash="{}"]'
                  .replace("{}", hash);
  var $imgs = $('img');
  $imgs.not(selector).fadeOut('fast');
  $imgs.filter(selector).fadeIn('fast');
}

$(window).on('hashchange', updateImage);
updateImage();

叶还是胡萝卜？

于 2013-08-12T02:12:40.703 回答
0

初始负载永远不会触发。$("#image").show("fast")从不开火，所以它永远不会到达开关。试试这个

updateImage = function() {
    var image = $('#image');
    switch(window.location.hash) {
    case "#leaf":
        image.attr('src', 'image1.png');
        break;
    case "#carrot":
        image.attr('src', 'image2.png');
        break;
  }
}
$(window).on('hashchange', updateImage);

唯一需要做的就是在页面加载时触发它，你就可以开始了

于 2013-08-12T02:29:51.387 回答