Javascript:使用for循环生成点击事件

时间:2016-11-06 21:12:24

标签: javascript php css pagination click

我正在研究一个关于在for循环中生成的点击事件的Javascript示例。

<?php
            $pages=$i/2;
            for($k=1;$k<=$pages;$k++){
                echo '<div style="border: 1px solid; width: 15px; display: inline-block" id="page-'.$k.'">'.$k.'</div>';
            }
        ?>

        <div id="dom-pages" style="display: none;" class="<?= $pages?>"></div>

        <script>
            var tag = document.createElement("script");
            tag.src = "../web/js/pagination.js";
            document.getElementsByTagName("head")[0].appendChild(tag)
        </script>

这是HTML部分,我根据$ pages变量的数量生成div。 重要的是每个div id都是“page - '。$ k。'” 从第1页到第 - 页 - '$ pages'

加载的pagination.js脚本是:

var div = document.getElementById("dom-pages");
var stranice = div.className;
var element=[];
for(var i=0;i<stranice;++i){
 element[i] = document.getElementById("page-"+(i+1));
    var margin=-40*i;
    $(element[i]).click(function() {
        $('#page-slider').css({
            'margin-top': margin
        })
    });
}

脚本获取var'div'上的$ pages值并存储在var'stranice'中 使用数组'element'可以生成所有想要的Id值。从“page-1”到“page- $ pages”。 每个Id css margin-top应该在点击时更改,从id = page-1 / margin-top = 0开始到最后一个id = page- $ pages / -40 * $ pages。

所有div和ID都是按照需要生成的,唯一的问题是所有生成的id click事件的margin-top值都是-40 * $ pages而不是for循环的每个-40 * i计数器。 我无法弄清楚为什么所有的点击事件和margin / margin-top值获取最后一次for循环运行的值。如果有人可以帮助我,我会很感激。谢谢!

0 个答案:

没有答案