我正在使用网站并使用javascript滚动文字。我正在使用一个计数器及其工作,但是当它通过条件语句时,它不会隐藏div或保持一致。有关为什么会发生这种情况的任何想法?
谢谢!
HTML:
<div id="arrow2">
<a id="arrowRight" href="javascript:ltoggle('box');"><img alt="Arrow Right" height="auto" src="images/rightarrow.png"></a>
</div>
<div id="content">
<div class="boxPosition" id="box1">
<p>This is a destination wedding. Come early, and stay late!</p>
</div>
<div class="boxPosition" id="box2">
<p>Festivities will start on Friday, August 16th.</p>
</div>
<div class="boxPosition" id="box3">
<p>The wedding will be on Sunday, August 18th late in the day, so you should plan to take Monday off!</p>
</div>
<div class="boxPosition" id="box4">
<p>a</p>
</div>
<div class="boxPosition" id="box5">
<p>b</p>
</div>
<div class="boxPosition" id="box6">
<p>c</p>
</div>
<div class="boxPosition" id="box7">
<p>d</p>
</div>
<div class="boxPosition" id="box8">
<p>e</p>
</div>
JS:
var counter = 1;
var numBoxes = 8;
function toggle(divName){
counter++
var ele = document.getElementById(divName + counter);
console.log(divName + counter);
if(ele.style.display == "block"){
ele.style.display = "none";
}
else{
ele.style.display = "block";
}
if(counter==numBoxes){
counter = 0;
}
}
答案 0 :(得分:1)
首先,在图片链接“javascript:ltoggle('box')中找到的门”ltoggle“;”未定义。看起来应该只是“切换”。
建议将标记更改为:
<a id="arrowRight" href="" onClick="toggle('box');return false;">
其次,JavaScript不容易识别由HTML本身设置的样式。所以第一次这条线总是假的。这是你的“不一致”问题:
if(ele.style.display == "block")
为了解决这个问题,我相信有一个调用js可以用来查找已设置的css样式,否则,用js设置它。查看此帖子: Get a CSS value with JavaScript
回答这两个问题,这件事可能会奏效。
答案 1 :(得分:0)
我立即看到了两件事:你在counter++
之后错过了一个分号,而你在锚点href中引用了javascript:ltoggle('box')
而不是javascript:toggle('box')
。
更改那些修复它吗?如果没有,你是否介意设置一个JSFiddle来解决问题所以我们可以仔细看看?