页面翻页时,它有我的列表和显示和隐藏按钮。然而,当我沿着列表下去时,它假设显示图片和一些文字。但是我的按钮(隐藏和显示)消失了。即使发生这种情况,如何使它们出现? 谢谢你的帮助
function imagechange(image)
{
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'/>";
mangasummary.innerHTML = changetext(mangasum[image],95);
readmanga.href = mangasite[image];
}
function changetext(text,num)
{
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++)
{
if (str.length + arrayWord[i].length >= numChar)
{
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar)
{
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1)
{
newtext += str+ "<br />";
}
}
return newtext;
}
function hide()
{
document.getElementById("listm").style.display = "none";
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value ="stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</br>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script>
mangaimage = document.getElementById("mangaim");
mangasummary = document.getElementById("ms");
readmanga = document.getElementById("rm");
</script>
</body>
答案 0 :(得分:0)
以下更正的代码有效。一个潜在的问题是声明一个数组并试图像对象一样使用它:
var mangasum = new Array();
mangasum["onepiece"] = "some string";
您实际上可以使用关联索引访问数组。正如MDN所说:
有些人认为你不应该使用数组作为关联 阵列。在任何情况下,您都可以使用普通对象,尽管这样做 所以有自己的警告。查看帖子轻量级JavaScript 以任意键为例的字典。
参考:MDN Arrays
因此,错误可能是次要语法错误和大量格式错误的html的组合。由于浏览器的稳健性,它无论如何都会一瘸一拐。尽管代码很丑陋,但我开始钦佩OP自己写的意愿,至少尝试一下......这比我在SO上的很多帖子都要多说。
我将它留给OP来完成细节并使其成为一个很棒的应用程序:
运行要测试的代码段(图片省略)
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
</head>
<body>
<table>
<tr>
<td id = "mim" colspan ="2">
<span id = "mangaim">
</span>
</td>
<td id = "min">
Manga List:<br />
<select id= "listm" size = "15" onchange = "imagechange(this.value)">
<option value = "onepiece" id = "po"> One Piece </option>
<option value = "naruto" id = "po" > Naruto </option>
<option value = "bleach" id = "po"> Bleach </option>
<option value = "gintama" id = "po"> Gintama </option>
<option value = "nisekoi" id = "po"> Nisekoi </option>
<option value = "worldtrigger" id = "po"> World Trigger </option>
<option value = "psi" id = "po"> PSI Kusuo Saiki </option>
<option value = "ironknight" id = "po"> Iron Knight </option>
<option value = "stealth" id = "po"> Stealth Symphony </option>
<option value = "illegalrare" id = "po"> Illegal Rare </option>
<option value = "haikyu" id = "po"> Haikyu!! </option>
<option value = "kuroko" id = "po"> Kuroko No Basket </option>
<option value = "assassin" id = "po"> Assassination Classroom </option>
<option value = "shoku" id = "po"> Shokugeki no Soma</option>
<option value = "toriko" id = "po"> Toriko </option>
</select>
</td>
</tr>
<tr>
<td colspan = "2">
<span id="ms">
</td>
</tr>
</table>
<button onclick = "hide()">Hide</button>
<button onclick = "showlist()">Show List</button>
<script type="text/javascript">
var mangasum = {
onepiece : "Gold Rogeet coveerso",
bleach : "Ichigo Kurosaki has always be",
stealth : "In a world where elves, dwar",
naruto : "In the village of Konohagakure",
kuroko : "Kuroko is a member from the l",
gintama : "The story focuses on an ecc",
nisekoi : "Raku Ichijou may be the heir to a y",
assassin : "A weird class kicks off in the super",
shoku : "Yukihira Souma's dream is to become a fu",
worldtrigger : "A gate to another dimension has burs",
haikyu : "A chance event triggerer",
illegalrare : "Supernatural creatures live alongside",
psi : "Saiki Kusuo has a wide array of superpowers at his",
ironknight : "A boy with a body like steel encounters the"
}
function imagechange(image) {
mangaimage.innerHTML = "<img src='mangalist/" + image + "small.jpg'>";
mangasummary.innerHTML = changetext(mangasum[image], 95);
readmanga.href = mangasite[image];
}
function changetext(text,num) {
numChar = num;
arrayWord = text.split(" ");
str = "";
strArray = new Array();
newtext = "";
for ( i = 0; i < arrayWord.length; i ++) {
if (str.length + arrayWord[i].length >= numChar) {
newtext += str + "<br />";
str = ""
}
if (str.length + arrayWord[i].length <= numChar) {
str += arrayWord[i] + " ";
}
if (i == arrayWord.length-1) {
newtext += str+ "<br />";
}
}
return newtext;
}
function hide() {
document.getElementById("listm").style.display = "none";
}
function showlist() {
document.getElementById("listm").style.display = "block";
}
var mangaimage = document.getElementById("mangaim");
var mangasummary = document.getElementById("ms");
var readmanga = document.getElementById("rm");
</script>
</body>
</html>