我的生活无法让它发挥作用。我试图在更改下拉菜单时显示不同的图像。它永远不会改变，这就是问题所在。
我想我需要用 docready 做点什么，但不确定是什么!
<html>
<head>
<script src="/js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$( document ).ready(function() {
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
});
</script>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
</body>
</html>
试过了。
$( document ).ready(function() {
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
});
</script>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
</body>
</html>
最佳答案
您的代码在 jsFiddle 中运行的原因是 jsFiddle 向您的 JavaScript 添加了隐式 onLoad 包装器。
没有那个包装器，你就有麻烦了。要解决此问题，请将 pictureList 数组移动到 $( document ).ready(function() {} 中。
在 jsFiddle 演示中，我还看到了混合内容警告，因为您请求的图像来自不安全的服务器，尽管网页本身是安全的 (https)。如果您更改 pictureList 数组以包含安全图像，则速度会显着提高。例如，尝试将其用于您的 pictureList 数组。
var pictureList = [
"https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg",
"https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg",
"https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_March_2010-1.jpg",
"https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg",
"https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg"
];
关于javascript - 在下拉 javascript/jquery 上更改图像，在 fiddle 中工作，但在其他地方不行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37014931/