JavaScript：单击按钮即可简单加载图片
[英]JavaScript: simple image load on button click
问题描述
I am fairly new to JavaScript, though not to programming. 
我对JavaScript相当陌生，尽管对编程不是。 My exercise is to have a page that shows an image and allows the user to go to next/previous image by clicking on a button. 我的练习是要有一个显示图像的页面，并允许用户单击按钮转到下一个/上一个图像。 I want to load the next/previous image from the server on the button click, so the page doesn't have to load all the images into the browser at once. 我要在单击按钮时从服务器加载下一个/上一个图像，因此该页面不必一次将所有图像加载到浏览器中。
This version just has a button to go to the next image, and I'm trying to load it with jQuery or AJAX. 这个版本只有一个按钮可以转到下一张图像，我正在尝试用jQuery或AJAX加载它。 The page loads the initial "image0", and the JavaScript debugger shows that the onClick event executes and does what I would expect, but the image doesn't change. 该页面将加载初始的“ image0”，并且JavaScript调试器显示onClick事件已执行并按照我的预期进行，但图像未更改。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
var imageIndex = 0;
var jpgImageName = "image0"
var loadString = "images/" + jpgImageName + ".JPG";
function changeImage()
{
imageIndex++;
if (imageIndex > 2) { imageIndex = 0; }
var locationString = "images/image" + imageIndex + ".JPG";
var loadString = $("<img />").attr('src', locationString);
$("imageSlot").append(loadString);
}
</script>
</head>
<body>
<div id="imageSlot">
<img id="currentImage" src="images/image0.JPG" height="400" alt="image"+imageIndex/>
</div>
<button id="changeImage" onclick="changeImage()">Change Image</button>
</body>
</html>
I got the append function from another Stack Overflow example. 我从另一个Stack Overflow示例获得了append函数。 I want to replace the current image, and have seen a suggestion to use html() instead of append() for that, but figured I'd try to get this working before I started changing the example. 我想替换当前图像，并看到了使用html()而不是append()的建议，但认为在开始更改示例之前，我会尝试使其工作。
I've also tried a .load() function on the image itself with just the URL for the next image. 我还尝试了图像本身的.load()函数，仅包含下一张图像的URL。 That didn't work either, though attempting to show both in the above example seemed likely to confuse people reading the question. 尽管试图在上面的示例中同时显示两者，这似乎也没有用，但人们可能会混淆阅读该问题的内容。 But if you want to show me how to solve it that way, or both ways, that'd be great. 但是，如果您想向我展示如何以这种方式或两种方式来解决，那将很棒。
4 个解决方案
解决方案1
3 已采纳 2012-10-08 14:19:34
If you are wanting to replace the current image with the next one, then you could try just changing the src of the current image directly: 如果要用下一张替换当前图像，则可以尝试直接更改当前图像的src：
function changeImage()
{
imageIndex++;
if (imageIndex > 2) { imageIndex = 0; }
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);
}
解决方案2
0 2012-10-08 14:11:18
Can you try with $("#imageSlot").append(loadString); 您可以尝试使用$（“＃imageSlot”）。append（loadString）;吗？ ? ？
解决方案3
0 2012-10-08 14:14:05
Change the line to 将行更改为
$('img').attr('src', locationString);
and delete the append()- line 并删除append（）-行
解决方案4
0 2012-10-08 14:36:58
Try something like the following for your function: 为您的功能尝试以下操作：
function changeImage(){
imageIndex++;
imageIndex = imageIndex % 2; //here '2' is the number of images you have (result is always 0 or 1 in this case)
var locationString = "images/image" + imageIndex + ".JPG";
$('#currentImage').attr('src', locationString);//set the 'src' attribute inline
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.