图像中奇怪的 Javascript 错误交换
我有这个疯狂的错误，只是有时会出现。当我开发这个网站时，这一点很明显，但后来它消失了一周左右，现在该网站上线了，它又回来了。我不认为这与我的托管有任何关系，因为它也会在本地出现错误。
我的问题是我在每次点击时交换 css 值背景图像。它在 95% 的情况下都能完美运行，但有时在 15 分钟的时间内它不会显示大约一半的图像，看起来是随机的。最奇怪的是，如果您查看检查器，您可以看到脚本正确地更改了 css 值，但图像根本没有加载。我不知道为什么！
这是网站：shouldivoteoliver.com 它位于“宣传”页面上。
这是 JavaScript：
$(document).ready(function() {
var n=0;
$(".button").click(function(){
if (n===5){
$('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
n++;
$("#putin").css("background-image","none");
}
else{
$('video').remove();
$("#putin").css("background-image",function(){
if (n>13){
n=1;
return ('url(images/1.jpg)');
}
else{
n++;
return ('url(images/'+n+'.jpg)');
}
});
}
});
});
I have this crazy bug that only comes up sometimes. It was apparent when I was developing this site but then it disappeared for a week or so and now that the site is live it's back. I don't think it has anything to do with my hosting because it bugs out locally as well.
My problem is that I'm swapping the css value background-image on each click. It works perfectly 95% of the time, but sometimes for a span of like 15 minutes it just won't display about half the images, seemingly randomly. The strangest thing is that if you look in the inspector you can see that the script correctly changed the css value, but the image simply wasn't loaded. I have no idea why!
Here's the website: shouldivoteoliver.com It's on the "Propaganda" page.
Here's the Javascript:
$(document).ready(function() {
var n=0;
$(".button").click(function(){
if (n===5){
$('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
n++;
$("#putin").css("background-image","none");
}
else{
$('video').remove();
$("#putin").css("background-image",function(){
if (n>13){
n=1;
return ('url(images/1.jpg)');
}
else{
n++;
return ('url(images/'+n+'.jpg)');
}
});
}
});
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我建议使用背景图像作为精灵并将背景位置更改为
反对更改背景图像属性。
这是我在谷歌上搜索的教程
http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/
I would suggest using a background image as a sprite and changing the background position as
opposed to changing the background image property.
Here is a tutorial that I googled
http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/
我试着把宣传上的所有幻灯片都看了两遍，但没有遇到任何问题。我不知道发生了什么，但是您可以通过创建一个数组来存储每个“幻灯片”的内容，然后只需单击鼠标即可循环遍历它，从而使您的代码更干净，更具可读性。我猜你真的不需要设置该 div 的背景属性，你可以只包含一个图像。
只是一个建议，不确定它是否有助于解决您的问题，但会使这个事情更易于管理并且更容易添加更多内容。
I tried going through all the slides on the propaganda twice but I didn't come across any problem. I don't know what is going on, but you can make your code a little cleaner and more readable by just making an array to store the contents of each "slide", and simply loop through it on mouse click. I guess you don't really need to set the background property of that div and you could just include an image.
Just an advice, not sure if it will help with your problem, but will make this thing more manageable and easier to add more stuff.
单行交换值
这是索引
i1与i2处的Here's a one-liner
swap value at index
i1withi2