javascript - 增加 DIV 数字变量的按钮

Question

我有以下 8 个图表

https://jsfiddle.net/BernydotJAr/grwzfjsn/

当然每个都有不同的 DIV ID，我试图在它中间放一个按钮来像幻灯片放映一样在它们之间切换或更改，我能够更改图像但不能更改 DIVS。

<div id="chartdiv"></div>               
<div id="chartdiv2"></div>          

我试过使用 Jquery，但无法显示 div 中的内容。所以当我点击一个按钮时，它应该添加一个数字，如 chartdiv & 1、chartdiv & 2 等等，这样我就可以一一显示了。下面是 jquery 代码(我从这里得到的:http://www.html5marketplace.com/slideshow/direct/index.html)

<script>
$(window).load(function(){
    var pages = $('#container li'), current=0;
    var currentPage,nextPage;
    var handler=function(){
        $('#container .button').unbind('click');
        currentPage= pages.eq(current);
        if($(this).hasClass('prevButton'))
        {
            if (current <= 0)
                current=pages.length-1;
            else
                current=current-1;
            nextPage = pages.eq(current);   

            nextPage.css("marginLeft",-604);
            nextPage.show();
            nextPage.animate({ marginLeft: 0 }, 800,function(){
                currentPage.hide();
            });
            currentPage.animate({ marginLeft: 604 }, 800,function(){
                $('#container .button').bind('click',handler);
            });
        }
        else
        {

            if (current >= pages.length-1)
                current=0;
            else
                current=current+1;
            nextPage = pages.eq(current);   

            nextPage.css("marginLeft",604);
            nextPage.show();
            nextPage.animate({ marginLeft: 0 }, 800,function(){
            });
            currentPage.animate({ marginLeft: -604 }, 800,function(){
                currentPage.hide();
                $('#container .button').bind('click',handler);
            });
        }
    }

    $('#container .button').click(handler);

   });

</script>

Answer 1

根据您提供的代码和您从其他站点获得的代码，div 必须在 li 元素内。类似这样

<div id="container">
<ul>
<li>
  <div id="chartdiv"></div>         
</li>
<li style="display:none;">
  <div id="chartdiv2"></div>            
</li>
<li style="display:none;">
  <div id="chartdiv3"></div>            
</li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>

查看完整代码

https://jsfiddle.net/grwzfjsn/3/