我正在一个网站上工作,并使用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;
}
}
首先,在图像链接"javascript:ltoggle('box');"中找到的大门"ltoggle"是未定义的。看起来它应该只是"切换"。
建议将标记更改为:
<a id="arrowRight" href="" onClick="toggle('box');return false;">
其次,JavaScript 不容易识别由 HTML 本身设置的样式。所以这条线在第一次通过时总是假的。这是您的"不一致"问题:
if(ele.style.display == "block")
为了解决这个问题,我相信有一个调用,js 可以用来查找已经设置的 css 样式,否则,使用 js 设置它。查看此帖子:使用 JavaScript 获取 CSS 值。
安斯都是,这个东西可能会起作用。
我马上看到两件事:您在counter++
后缺少分号,并且您引用的是javascript:ltoggle('box')
而不是在您的锚 href 中javascript:toggle('box')
。
改变这些能解决它吗? 如果没有,您是否介意设置一个复制问题的 JSFiddle,以便我们可以仔细查看?