我正在制作一个 Flash 网站，每次在页面上选择一个按钮时，都会更改下载链接以下载核心 Flash 文件。奇怪的是我让这个工作完美，但在项目工作一周后它就停止了，我不知道为什么任何输入都会很棒。
$(document).ready(function () {
var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];
var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];
var c = 0;
var flashmovie, test, temp;
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = links.length;
}
c--
displayFiles();
download();
}
document.getElementById('next').onclick = function () {
if (c == links.length - 1) {
c = -1;
}
c++;
displayFiles();
download();
}
document.getElementById('rand').onclick = function () {
temp = c;
while (c == temp) {
c = Math.floor(Math.random() * links.length);
}
displayFiles();
download();
}
// Scripts for the left and right arrow key functionality
document.addEventListener('keydown', function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function (e) {
if (e.which === 39) {
$("#next").click();
}
});
}
function displayFiles() {
test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
document.getElementById('title').innerHTML = displaytext[c];
flashmovie.innerHTML =
'<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
'<param name="movie" value="' + links[c] + '">' +
'<\/object>';
}
function download() {
document.getElementById('downLink').setAttribute('href', links[c]);
document.getElementById('downLink').setAttribute('download', displaytext[c]);
}
window.addEventListener ?
window.addEventListener('load', init, false) :
window.attachEvent('onload', init);
});
HTML
<body>
<div class="titleText">
<h1>Anon Curb</h1>
</div>
<div id="flashmovie" class="flashMovieSamp">
<object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
<param name="movie" value="http://www.anon-curb.com/swfs/welcomeflash.swf">
</object>
</div>
<!-- end #container -->
<div id="buttonCon">
<div id="buttons">
<button id="next">next</button>
<button id="rand">Random</button>
<button id="back">Back</button>
</div>
</div>
<div id="titleCon">
<a href="swfs/welcomeflash.swf" class="downLink" download="welcomeflash">
<div id="title">Hit random button</div>
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="js/flashcollection.js"></script>
</body>
最佳答案
主要问题是函数download()，您尝试通过Id“downLink”获取元素，但HTML中没有为该标签分配id，所以我现在将id='downLink'添加到标签中。目前下行链路工作正常。
一点建议:由于您已经涉及了 jQuery，因此在处理 DOM 时您可以使用 jQuery 选择器。这样会更加方便也有助于保持代码的一致性。
$(document).ready(function () {
var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];
var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];
var c = 0;
var flashmovie, test, temp;
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = links.length;
}
c--
displayFiles();
download();
}
document.getElementById('next').onclick = function () {
if (c == links.length - 1) {
c = -1;
}
c++;
displayFiles();
download();
}
document.getElementById('rand').onclick = function () {
temp = c;
while (c == temp) {
c = Math.floor(Math.random() * links.length);
}
displayFiles();
download();
}
// Scripts for the left and right arrow key functionality
document.addEventListener('keydown', function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function (e) {
if (e.which === 39) {
$("#next").click();
}
});
}
function displayFiles() {
test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
document.getElementById('title').innerHTML = displaytext[c];
flashmovie.innerHTML =
'<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
'<param name="movie" value="' + links[c] + '">' +
'<\/object>';
}
function download() {
document.getElementById('downLink').setAttribute('href', links[c]);
document.getElementById('downLink').setAttribute('download', displaytext[c]);
}
window.addEventListener ?
window.addEventListener('load', init, false) :
window.attachEvent('onload', init);
});<html>
<head>
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="js/flashcollection.js"></script>
</head>
<body>
<div class="titleText">
<h1>Anon Curb</h1>
</div>
<div id="flashmovie" class="flashMovieSamp">
<object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
<param name="movie" value="http://www.anon-curb.com/swfs/welcomeflash.swf">
</object>
</div>
<!-- end #container -->
<div id="buttonCon">
<div id="buttons">
<button id="next">next</button>
<button id="rand">Random</button>
<button id="back">Back</button>
</div>
</div>
<div id="titleCon">
<a href="swfs/welcomeflash.swf" class="downLink" download="welcomeflash" id="downLink">
<div id="title">Hit random button</div>
</a>
</div>
</body>
</html>关于javascript - 为什么我的动态更改链接不起作用？ (Javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36781068/