Question

所有的HTML东西都是用document.write生成的，假设我有多个ul元素，每个ul都有两个li元素。点击第一个li，第二个下降，动态内容在哪里。每个下拉列表中的内容取决于li element upper。

以下是从prj：

复制的一些代码

document.write("<div class='coolTable'> ")
    document.write("<span style='font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;'> Round " + groupCounter + "  (" + s + " Sets - " + r + " Reps)</span>")
    document.write("<ul>")
    document.write("<li id='" + i + "' class='listPoints' onclick='dropDown(this); overlay(" + i + ");'> Exercise </li>")

    document.write("<li id='overlay'><div id='overlay16' onscroll='scrollLimit()'><p hidden id='number'> number </p><div class=new_div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height:100px; overflow:hidden; margin-top:15px'> <img id='testImg2' src='C:/Users/jcournoyer/Documents/fytPics/Move 9_rough.png' alt='Exercie Picture' height='95px'> </div><div class=new_div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height: 250px;  margin-top:15px' color='#FFFFFF' width='100%'><text id='exerciseName' style='color:white;font-size:110%; font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;'> Exercise Information </text><div style='background-color: rgba(255, 255, 255, 0.73);height:200px;width:100%;overflow:auto;border:0; box-shadow:none; margin-top:10px' width='160%'><p id='description' align='left' style='font-size:85%'>Content you want the user to see goes here.</p></div></div><div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; width:100%; height: 250px;  margin-top:30px' color='#FFFFFF'><text style='color:white;font-size:110%; font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;'> Exercise Video </text><div style='background-color: rgba(255, 255, 255, 0.73); border:0; box-shadow:none; height:300px;  margin-top:10px'><iframe style='opacity:0.0' id='exerciseVideo' src='https://drive.google.com/file/d/0Bynj5wN12K5kdmtBQnY0X0xQSVU/preview' width='90%' height='200'></iframe></div></div><div style='border:0; box-shadow:none; width:100%;margin: 10px 0; max-height: 47px;'><a href='#' onclick='likeExercise()' style='display: inline-block; max-height: 46px;'><img src='http://googledrive.com/host/0Bynj5wN12K5kR0IzWGRRUmhUb1k/FYT_Icon_Like_Grey_sq.png'  height = '45px' width='45px'  hspace='5' title='Like'></img></a><a href='#' onclick='dislikeExercise()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0Bynj5wN12K5kR0IzWGRRUmhUb1k/FYT_Icon_Dislike_Grey_sq.png'  height = '45px' width='45px' hspace='5' title='Dislike'></img></a><a href='#' onclick='jointPain()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0Bynj5wN12K5kR0IzWGRRUmhUb1k/FYT_Icon_Pain_Grey_sq.png'  height = '45px' width='45px' hspace='5' title='This one Hurts!'></img></a><a href='#' onclick='trackProgress()' style='display: inline-block; max-height: 46px; margin-left: 50px;'><img src='http://googledrive.com/host/0Bynj5wN12K5kR0IzWGRRUmhUb1k/FYT_Icon_Pencil_Grey_sq.png'  height = '45px' width='45px' hspace='5' title='Track my Progress'></img></a><a href='#' onclick='gotoCaspio()' style='display: inline-block; max-height: 46px; margin-left: 50px;'> <img src='http://googledrive.com/host/0Bynj5wN12K5kR0IzWGRRUmhUb1k/FYT_Icon_Done_Grey_sq.png'  height = '45px' width='45px'  hspace='5' title='I am done!'> </a></div></div></li>")
    document.write("</ul>")

function overlay(x) {
    el = document.getElementById("overlay");
    el2 = document.getElementById("exerciseVideo");
    el3 = document.getElementById("display-table");



    document.getElementById("exerciseName").innerHTML = Exercise[winnerChickenDinner[x]][30]
    document.getElementById("testImg2").src = "http://www.googledrive.com/host/0Bynj5wN12K5kZzlJWENRcWVobHc/" + Exercise[winnerChickenDinner[x]][60] + ".png"
    document.getElementById("description").innerHTML = s + " Sets of " + r + "</br> </br><span style='font-size:100%'> <b> Exercise Description </b> </span>" + Exercise[winnerChickenDinner[x]][62] + "</br></br><span style='font-size:100%'> <b> Tips & Tricks </b> </span> </br></br>" + Exercise[winnerChickenDinner[x]][64] + "</br></br> <span style='font-size:100%'> <b> Make It Harder </b> </span></br></br>" + Exercise[winnerChickenDinner[x]][65] + "</br></br> <span style='font-size:100%'> <b> Make It Easier </b> </span></br></br>" + Exercise[winnerChickenDinner[x]][66] 
    document.getElementById("exerciseVideo").src = "https://drive.google.com/file/d/" + Exercise[winnerChickenDinner[x]][61] + "/preview"
    document.getElementById("number").innerHTML = x
    }

我有大约9个if / else＆＃39; s所以我有9个<ul>但document.write("<li id='" + i + "' class='listPoints' onclick='dropDown(this); overlay(" + i + ");'> Exercise </li>") overlay(" + i + ")只在第一个<li>工作我觉得问题是大多数在那里我需要每个<li>打开他的叠加层。

我不是JavaScript家伙，我只是得到了额外的头痛。

感谢您的帮助

Answer 1

是的。，每次创建元素时，您都会获得一个新标记id作为i的值。

确保“i”值已更改。由于任意数量的具有相同id值的代码只能影响第一个代码，因此您现在不会看到任何更改。

确保为每次迭代/ createElement（）更改id的值。

为此，点击标签，您可以调用一个函数，其中变量i的值递增或至少根据您的需要更改！

function dropDown(el) { 
    toggleClass(el.nextElementSibling, 'overlayOpen');
    i += 1;
}

如果您的变量i在本地声明，您将面临一些问题。你需要全局解决它。

在javaScript中，任何没有声明的vaiable都被视为全局变量。

JavaScript动态内容仅适用于第一个元素

1 个答案: