使用javascript

时间：2018-01-13 01:45:23

标签： javascript

所以!!! ...好吧......这里有很多东西，但是除了一个小细节之外我还能解决所有问题。首先，我将尝试解释一下我试图实现的目标......在侧边栏上，我有10个链接到iframe中显示的不同html文件。 3＆＃34;版本＆＃34;页面中心的按钮既可以更改这10个链接的目录，也可以编辑<iframe src="xxx.html"/>。除了链接号10之外，它完美地运行。我在查找出错的地方没有任何进展，但<iframe src="xxxx.html"/>正在处理所有链接，链接10除外。

只是为了澄清，问题不在于sidenav链接。据我所知，当单击版本按钮时，所有链接都被修改为正确的目录。问题在于<iframe src="xxx.html"/>修改，仅当链接10是＆＃34;活动＆＃34;链接。

要清楚地看到问题，您需要打开检查器并找到iframe元素，以查看当任何链接1-9处于活动状态时src值如何正确更改，但目录未正确修改当链接10处于活动状态时。

“已重新编码”按钮应将src链接到../ example / recoded / xxxx.html

“编码”按钮应将src链接到../ example / encoded / xxxx.html

PNG按钮应将src链接到../ example / img / xxxx.png

非常感谢您的帮助。

＆＃13;
＆＃13; 
//Script
/* function to add and remove active classes from clicked sidebar and versions buttons */
var selector, elems, makeActive, versBtn, btns;
selector = '.sideUL li';
elems = document.querySelectorAll(selector);
btns = document.getElementsByClassName('versions');

makeActive = function () {
  if(this.tagName == 'LI'){
    for(var i = 0; i < elems.length; i++){
      elems[i].classList.remove('active');
    }
  }else if(this.tagName == 'DIV'){
    for(var i = 0; i < btns.length; i++){
      btns[i].classList.remove('active');
    }
  }
  this.classList.add('active');
};

for(var i = 0; i < elems.length; i++){
  elems[i].addEventListener('mousedown', makeActive);
}
for(var i = 0; i < btns.length; i++){
  btns[i].addEventListener('mousedown', makeActive);
}

//Start of linkChange function
/*
primaryDir is the desired target link;
firstSecondary is first search option;
secondSecondary is designated for .png version; unless .png is primaryDir value;
*/
function linkChange(vers, primaryDir, firstSecondary, secondSecondary){
  var link = '.sideUL li a';
  var htmlRef, anchor, activeLink, linkIncludesPrim, linkIncludesFirst, linkIncludesSecond, iFra, activeRef;
  htmlRef = document.querySelectorAll(link);
  activeLink = document.querySelectorAll('.sideUL .active');
  for(var i = 0; i < htmlRef.length; i++){
    anchor = htmlRef[i];
    activeRef = activeLink[0].children[0].href;
    linkIncludesPrim = anchor.href.includes(primaryDir);
    linkIncludesFirst = anchor.href.includes(firstSecondary);
    linkIncludesSecond = anchor.href.includes(secondSecondary);
    iFra = document.getElementById('iFCont');
    if(vers === 'clean'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        anchor.href = anchor.href.replace(firstSecondary, primaryDir);
        iFra.src = activeRef;
        console.log(anchor.href);
      }else if(linkIncludesSecond == true){
        anchor.href = anchor.href.replace(secondSecondary, primaryDir);
        anchor.href = anchor.href.replace(".png", ".html");
        iFra.src = activeRef;
        iFra.src = iFra.src.replace(".png", ".html");
        console.log(anchor.href);
      }else{
        console.log("Error, no return.");
      }
    }else if(vers === 'encode'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        anchor.href = anchor.href.replace(firstSecondary, primaryDir);
        iFra.src = activeRef;
        console.log(anchor.href);
      }else if(linkIncludesSecond == true){
        anchor.href = anchor.href.replace(secondSecondary, primaryDir);
        anchor.href = anchor.href.replace(".png", ".html");
        iFra.src = activeRef;
        iFra.src = iFra.src.replace(".png", ".html");
        console.log(anchor.href);
      }else{
        console.log("Error, no return.");
      }
    }else if(vers === 'png'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        anchor.href = anchor.href.replace(firstSecondary, primaryDir);
        anchor.href = anchor.href.replace(".html", ".png");
        iFra.src = activeRef;
        iFra.src = iFra.src.replace(".html", ".png");
        console.log(anchor.href);
      }else if(linkIncludesSecond == true){
        anchor.href = anchor.href.replace(secondSecondary, primaryDir);
        anchor.href = anchor.href.replace(".html", ".png");
        iFra.src = activeRef;
        iFra.src = iFra.src.replace(".html", ".png");
        console.log(anchor.href);
      }else{
        console.log("Error, no return.");
      }
    }
  }
}

function changeFormat(ver){
  var firstTxt = document.getElementById("firstStat");
  var verText;
  if(ver === "reCode"){
    linkChange('clean', "example/Recoded", "example/Encoded", "example/Img");
  }else if(ver === 'enCode'){
    linkChange('encode', "example/Encoded", "example/Recoded", "example/Img");
  }else if(ver === 'img'){
    linkChange('png', "example/Img", "example/Recoded", "example/Encoded");
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
＆＃13; 
   
body {
  font-family: Georgia; 
  color: #444; 
}

.frame{
  text-align: center;
  padding-bottom: 2em;
}

div.frame iframe{
  background-color: #ffffff;
}

.sidenav li{
  border-bottom: none;
}

.sidenav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #666;
  overflow: hidden;
  transition: 0.5s;
  padding-top: 50px;
  text-align: left;
  overflow-y: auto;
}

.sidenav .closebtn{
  right: 0;
  font-size: 3em;
  text-align: right;
  padding-right: 25px;
}

.sidenav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1em;
  color: #f2f2f2;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover{
  background-color: #222;
  border-bottom: none;
}

.sideNavLogo{
  position: fixed;
  left: 1%;
  bottom: 50%;
  width: 105px;
}

.versions{
  color: #f2f2f2;
  width: 30%;
  float: left;
  min-width: 170px;
  display:block;
  cursor: pointer;
  border: 1px solid black;
  height: 60px;
  text-align: center;
  padding-top: 1% 0;
  border-radius: 10px;
  margin: 0 1%;
  background-color: #666666;
}

.versions:hover{
  background-color: #222222;
}

.active{
  background-color: #4CAF50;
}
＆＃13; 
<div>
 <div class="versions" onclick="changeFormat('reCode')">
  <p class="enlarge">Recoded version</p>
 </div>
 <div class="versions active" onclick="changeFormat('enCode')">
  <p class="enlarge">Encoded version</p>
 </div>
 <div class="versions" onclick="changeFormat('img')">
  <p class="enlarge">PNG version</p>
 </div>
</div>

<div class="frame">
 <iframe src="./example/Encoded/20180112_example1.html" frameborder="no" scrolling="no" height="2450" width="620" name="content" id="iFCont">Sorry, your browser doesn't support inline iframes.</iframe>
</div>

<div id="mySidenav" class="sidenav">
 <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
 <ul class="sideUL">
  <li class="active">
   <a href="./example/Encoded/20180112_example1.html" target="content">Example 1</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example2.html" target="content">Example 2</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example3.html" target="content">Example 3</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example4.html" target="content">Example 4</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example5.html" target="content">Example 5</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example6.html" target="content">Example 6</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example7.html" target="content">Example 7</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example8.html" target="content">Example 8</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example9.html" target="content">Example 9</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example10.html" target="content">Example 10</a>
  </li>
 </ul>
</div>

<div class="sideNavLogo">
 <div style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Links</div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我调试了错误。所有编辑都是linkChange函数。在iFra.src =循环之后移动了for以及一些其他变量定义。这样做会刮掉几行。保持聪明。

//Script
/* function to add and remove active classes from clicked sidebar and versions buttons */
var selector, elems, makeActive, versBtn, btns;
selector = '.sideUL li';
elems = document.querySelectorAll(selector);
btns = document.getElementsByClassName('versions');

makeActive = function () {
  if(this.tagName == 'LI'){
    for(var i = 0; i < elems.length; i++){
      elems[i].classList.remove('active');
    }
  }else if(this.tagName == 'DIV'){
    for(var i = 0; i < btns.length; i++){
      btns[i].classList.remove('active');
    }
  }
  this.classList.add('active');
};

for(var i = 0; i < elems.length; i++){
  elems[i].addEventListener('mousedown', makeActive);
}
for(var i = 0; i < btns.length; i++){
  btns[i].addEventListener('mousedown', makeActive);
}

//Start of linkChange function
/*
primaryDir is the desired target link;
firstSecondary is first search option;
secondSecondary is designated for .png version; unless .png is primaryDir value;
*/
function linkChange(vers, primaryDir, firstSecondary, secondSecondary){
  var htmlRef, dir, activeLink, linkIncludesPrim, linkIncludesFirst, linkIncludesSecond, iFra, activeRef;
  htmlRef = document.querySelectorAll('.sideUL li a');
  activeLink = document.querySelectorAll('.sideUL .active');
  for(var i = 0; i < htmlRef.length; i++){
    dir = htmlRef[i];
    linkIncludesPrim = dir.href.includes(primaryDir);
    linkIncludesFirst = dir.href.includes(firstSecondary);
    linkIncludesSecond = dir.href.includes(secondSecondary);
    if(vers == 'clean'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        dir.href = dir.href.replace(firstSecondary, primaryDir);
        console.log(dir.href);
      }else if(linkIncludesSecond == true){
        dir.href = dir.href.replace(secondSecondary, primaryDir);
        dir.href = dir.href.replace(".png", ".html");
        console.log(dir.href);
      }else{
        console.log("Error, no return.");
      }
    }else if(vers == 'encode'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        dir.href = dir.href.replace(firstSecondary, primaryDir);
        console.log(dir.href);
      }else if(linkIncludesSecond == true){
        dir.href = dir.href.replace(secondSecondary, primaryDir);
        dir.href = dir.href.replace(".png", ".html");
        console.log(dir.href);
      }else{
        console.log("Error, no return.");
      }
    }else if(vers == 'png'){
      if(linkIncludesPrim == true){
        console.log("Alread Linked.");
      }else if(linkIncludesFirst == true){
        dir.href = dir.href.replace(firstSecondary, primaryDir);
        dir.href = dir.href.replace(".html", ".png");
        console.log(dir.href);
      }else if(linkIncludesSecond == true){
        dir.href = dir.href.replace(secondSecondary, primaryDir);
        dir.href = dir.href.replace(".html", ".png");
        console.log(dir.href);
      }else{
        console.log("Error, no return.");
      }
    }
  }
  iFra = document.getElementById('iFCont');
  activeRef = activeLink[0].children[0].href;
  iFra.src = activeRef;
  console.log("Frame source - " + iFra.src);
}

function changeFormat(ver){
  var firstTxt = document.getElementById("firstStat");
  var verText;
  if(ver === "reCode"){
    linkChange('clean', "example/Recoded", "example/Encoded", "example/Img");
  }else if(ver === 'enCode'){
    linkChange('encode', "example/Encoded", "example/Recoded", "example/Img");
  }else if(ver === 'img'){
    linkChange('png', "example/Img", "example/Recoded", "example/Encoded");
  }
}

function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
   
body {
  font-family: Georgia; 
  color: #444; 
}

.frame{
  text-align: center;
  padding-bottom: 2em;
}

div.frame iframe{
  background-color: #ffffff;
}

.sidenav li{
  border-bottom: none;
}

.sidenav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #666;
  overflow: hidden;
  transition: 0.5s;
  padding-top: 50px;
  text-align: left;
  overflow-y: auto;
}

.sidenav .closebtn{
  right: 0;
  font-size: 3em;
  text-align: right;
  padding-right: 25px;
}

.sidenav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1em;
  color: #f2f2f2;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover{
  background-color: #222;
  border-bottom: none;
}

.sideNavLogo{
  position: fixed;
  left: 1%;
  bottom: 50%;
  width: 105px;
}

.versions{
  color: #f2f2f2;
  width: 30%;
  float: left;
  min-width: 170px;
  display:block;
  cursor: pointer;
  border: 1px solid black;
  height: 60px;
  text-align: center;
  padding-top: 1% 0;
  border-radius: 10px;
  margin: 0 1%;
  background-color: #666666;
}

.versions:hover{
  background-color: #222222;
}

.active{
  background-color: #4CAF50;
}
<div>
 <div class="versions" onclick="changeFormat('reCode')">
  <p class="enlarge">Recoded version</p>
 </div>
 <div class="versions active" onclick="changeFormat('enCode')">
  <p class="enlarge">Encoded version</p>
 </div>
 <div class="versions" onclick="changeFormat('img')">
  <p class="enlarge">PNG version</p>
 </div>
</div>

<div class="frame">
 <iframe src="./example/Encoded/20180112_example1.html" frameborder="no" scrolling="no" height="2450" width="620" name="content" id="iFCont">Sorry, your browser doesn't support inline iframes.</iframe>
</div>

<div id="mySidenav" class="sidenav">
 <a href="#" class="closebtn" onclick="closeNav()">&times;</a>
 <ul class="sideUL">
  <li class="active">
   <a href="./example/Encoded/20180112_example1.html" target="content">Example 1</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example2.html" target="content">Example 2</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example3.html" target="content">Example 3</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example4.html" target="content">Example 4</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example5.html" target="content">Example 5</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example6.html" target="content">Example 6</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example7.html" target="content">Example 7</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example8.html" target="content">Example 8</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example9.html" target="content">Example 9</a>
  </li>
  <li>
   <a href="./example/Encoded/20180112_example10.html" target="content">Example 10</a>
  </li>
 </ul>
</div>

<div class="sideNavLogo">
 <div style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Links</div>
</div>

相关问题
最新问题