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

Question

由于重要的不可解析的原因,通过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

Answer 1

你增加了++this.id.试试this.id+1,因为我很确定你不想修改它id,只需要它并添加一个.

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