Question

我在一个每个页面上都有很多表的网站上工作。我想在顶部添加一个滚动条。我搜索并找到了这个：http://jsfiddle.net/simo/67xSL/ 现在，我尝试调整它，以便每个表都有自己的滚动条。这是我到目前为止所做的：

jQuery( document ).ready(function(index) {
var base ='thescroll wpt'
var thediv ='thedivfix thediv'
var counter=0;
var theclass= base+counter;
var theinnerdiv = thediv+counter;
jQuery('table.tablepress').each(function(){
    jQuery( "table.tablepress" ).before('<div class="'+theclass+'"><div class="'+theinnerdiv+'"></div></div>');
    jQuery(theclass).on('scroll', function (e) {
        jQuery(theinnerdiv).scrollLeft(jQuery(theclass).scrollLeft());
    }); 
    jQuery(theinnerdiv).on('scroll', function (e) {
        jQuery(theclass).scrollLeft(jQuery(theinnerdiv).scrollLeft());
    });
    jQuery(window).on('load', function (e) {
        jQuery(theinnerdiv).width(jQuery('table.tablepress').width());
    });
})

}）;

实际上，计数器保持为0并且每个表都会出现许多滚动条而不是只有一个。我怎么能解决这个问题？

Answer 1

您始终可以使用jQuery方法$.now()生成一个代表当前时间的长数字，以毫秒为单位。 http://api.jquery.com/jquery.now/

如果你想确保该号码没有被使用两次，你可以将它保存到一个数组中，并查看该条目是否存在 - 如果存在，则生成一个新的。

您还可以使用生成的数字并使用Math.random()方法

随机化它

或者只是通过在counter末尾添加counter++来增加您定义的变量each，然后按以下方式创建您的ID {{1} }

Answer 2

在你的代码中，计数器在each块之外，这就是为什么它始终为0.将它移动到每个块内并在每次迭代后递增它，它将每次生成新的id / class。

jQuery( document ).ready(function(index) {
var base ='thescroll wpt'
var thediv ='thedivfix thediv'
var counter=0;

jQuery("table.tablepress").each(function(){
    var theclass= base+counter;
    var theinnerdiv = thediv+counter;
    jQuery(this).before('<div class="'+theclass+'"><div class="'+theinnerdiv+'"></div></div>');
    jQuery(theclass).on('scroll', function (e) {
        jQuery(theinnerdiv).scrollLeft(jQuery(theclass).scrollLeft());
    }); 
    jQuery(theinnerdiv).on('scroll', function (e) {
        jQuery(theclass).scrollLeft(jQuery(theinnerdiv).scrollLeft());
    });
    jQuery(window).on('load', function (e) {
        jQuery(theinnerdiv).width(jQuery('table.tablepress').width());
    });
    counter++;
})

如何为每个表插入具有唯一ID的div

2 个答案: