使用 JQuery 显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18178409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display image with JQuery
提问by Ben P. Dorsi-Todaro
I'm trying to get this code to work. Pretty much if the URL has #leaf in it then the tag updates to display image2.png. I'm not sure what I'm doing wrong.
我正在尝试使此代码正常工作。几乎如果 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:I'm open to better ways of achieving this. Just tried the following but still doesn't work.
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>
回答by Raman Lalia
Try this:
尝试这个：
<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" />
Setting window.location.hrefsets the location of the current document. You need to set the srcattribute on your imgtag. Also, you need to surround your strings with quotes (i.e. "image1.png"instead of image1.png), or else the JavaScript interpreter will throw an error.
设置window.location.href设置当前文档的位置。您需要src在img标签上设置属性。此外，您需要用引号将字符串括起来（即"image1.png"代替image1.png），否则 JavaScript 解释器将抛出错误。
Further, the second argument to the showmethod is a function. You don't have the correct syntax for that, as @Phil-R pointed out.
此外，该show方法的第二个参数是一个函数。正如@Phil-R 指出的那样，您没有正确的语法。
回答by Brigand
An alternative is to declare what means what in your HTML.
另一种方法是在 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>
The JavaScript then just finds images with a matching data-hashattribute.
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();
leafor carrot?
叶子还是胡萝卜？
回答by Last Rose Studios
the inital load is never firing. $("#image").show("fast")never fires, so it never gets to the switch. Try this instead
初始负载永远不会触发。$("#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);
The only thing needed is to fire it on page load, and you are good to go
唯一需要的是在页面加载时触发它，你很高兴
