Question

我正在尝试使用存储在scripts.js文件中的函数来更改HTML文件中图像的图像src。我已经在这里有一个脚本，所以连接文件没有问题。这是我的工作脚本。

scripts.js中

function hideSelected(device) {
    if($('#addDevice').val() == 'tablet') {
            $('label[for=tabletsize], input#tabletsize').fadeIn(500);
            $('label[for=tabletcolor], input#tabletcolor').fadeIn(500);
    } else {
            $('label[for=tabletsize], input#tabletsize').fadeOut(500);
            $('label[for=tabletcolor], input#tabletcolor').fadeOut(500);
    }
}

home.html的

<select name="device" id="addDevice" onchange="hideSelected();">
    <option value="tablet">Tablet</option>
    <option value="desktop">Desktop</option>
</select>

<img src="img/oldImage.png" id="myImage" />

为简单起见，我缩小了代码范围。当我将以下代码添加到脚本中时（仅用于测试目的，我实际上是将其添加到另一个函数中），图像不会改变。

$('#myImage').attr('src',"img/tooltip/category_feature.png");

如何在另一个文件中托管我的功能时，如何定位和更改图像的src？当我在HTML文件的顶部使用它时，此脚本可以正常工作，但是，当添加到另一个文件时，它并没有。虽然功能的淡化部分无论我在哪里都可以使用。只是不是图像。

感谢。

Answer 1

尝试在html底部的所有脚本（jQuery等）的底部添加外部脚本.js文件。

＆＃13;

function hideSelected(device) {
    if($('#addDevice').val() == 'tablet') {
            $('label[for=tabletsize], input#tabletsize').fadeIn(500);
            $('label[for=tabletcolor], input#tabletcolor').fadeIn(500);
    } else {
            $('label[for=tabletsize], input#tabletsize').fadeOut(500);
            $('label[for=tabletcolor], input#tabletcolor').fadeOut(500);
    }
}
$('#myImage').attr('src',"http://via.placeholder.com/300");

＆＃13;

<!DOCTYPE html>
<html lang="en">
	<head>
	</head>
	<body>
<select name="device" id="addDevice" onchange="hideSelected();">
    <option value="tablet">Tablet</option>
    <option value="desktop">Desktop</option>
</select>

<img src="http://via.placeholder.com/350x150" id="myImage" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>


	</body>
</html>

＆＃13;

Answer 2

我不知道如何将脚本文件加载到html文件中。但我可以建议的是，确保加载JQuery以及加载DOM后html文件的结尾以及函数调用也应该放在JQuery脚本之后非常重要。

JQuery脚本也可以放在html文件的标题部分，但不建议这样做。

希望有所帮助。

Answer 3

解决。我的原始代码很好。显然，浏览器中的刷新可以解决问题。对于未来的问题，我目前的做法是在隐身标签中工作，以避免cookie和缓存，但经常，我做的一些更改将不会生效。我特别注意到CSS。有什么建议？感谢。

Javascript从外部.js文件更改图像Src

3 个答案: