这个令人讨厌的按钮是双跳

时间:2016-04-05 16:11:17

标签: javascript html html5

由于重要的不可解析的原因,javascript会将每个幻灯片作为子项附加到每个幻灯片。它的作用是滚动到下一张幻灯片:

<slide id="slide1" class="slide">
</slide>
<slide id="slide2" class="slide">
</slide>
<slide id="slide3" class="slide">
</slide>
<slide id="slide4" class="slide">
</slide>
<slide id="slide5" class="slide">
</slide>
<slide id="slide6" class="slide">
</slide>
<slide id="slide7" class="slide">
</slide>

这是javascript:

<script type="text/javascript" language="javascript">
for(i=1;i<7;i++){
    var li = document.createElement("li");
    li.id=i;
    li.className="dav";
    li.innerHTML="^";
    li.onclick=scrolls;
    document.getElementById("slide"+i).appendChild(li);
}
function scrolls(){
    var a=++this.id;
    document.getElementById("slide"+a).scrollIntoView();
}
</script>

这是按钮第一次运行良好的问题但是在下一次点击时它会向前跳过两个幻灯片,例如:点击第一个按钮并向上滚动并再次单击它后,视图将显示在第三张幻灯片上不再是第二个了。发生了什么任何帮助将不胜感激,并请获得我的这个神秘的BUG!最后不要使用JQUERY

1 个答案:

答案 0 :(得分:7)

你增加了++this.id。试试this.id+1,因为我非常确定您不想修改 id,只需获取并添加一个。

值得注意的是this.id不是你应该轻易玩弄的东西。设置时尝试this.setAttribute("data-target",'slide'+(i+1));之类的内容,然后document.getElementById(this.getAttribute("data-target")).scrollIntoView(); - 魔法! :d