为什么我的动态变化链接不起作用? (Javascript)
我正在做一个flash站点来改变它下载链接每次在页面上选择一个按钮到corespronding flash文件下载。奇怪的部分是我完美的完成了这项工作,但在项目工作一周后,它停止了,我不知道为什么输入会很好。为什么我的动态变化链接不起作用? (Javascript)
$(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>
主要的问题是功能下载(),你试图通过ID“下行”来获得元素,但没有分配中的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>
Omggggg多数民众赞成合法的第十次在过去一年做了类似的项目。我真的非常需要开始关注这个问题,不过谢谢您先生提醒我的愚蠢:D – cosmichero2025
@ cosmichero2025,在Chrome/Firefox中使用“检查”和“控制台”将有助于调试。 :) – Kelvin
你尝试将其关闭并重新开启? – Malk
我试过这样做,但然后火花开始飞出机器的嘴巴不知道如何解决它虽然我会打电话给坦率,虽然他可能有一个想法 – cosmichero2025
哈哈! :)虽然,你应该指定它不工作的方式 – Malk