0

I want to create a code that get's the values from array ["1", "2", "3"] and then it creates a new row with 7 of this. The array will have near 90 values, so from 1-7 is in the first row, 8-14 in another and so. I created this code but it just freezes the website and crashes the browser, so I would like you to tell me where's the mistake. 

var newVals = new Array("1", "2", "3"..."81");
var target = ".content table";
var activeTar = target + " .active";
for(var i = 0; i < newVals.length; i++){
    for (var y = 0; y < 7; y++){
        if(y == 0){
            jQuery(target).append('<tr class="active"></tr>');
        }
        var valId = newVals[i];
        var valImg = "http://sub.domain.com/" + valId + "/picture";
        var valCode = '<td class="cell"><a class="toggleAdd" tabindex="0" data-icon="'+valId+'"><img src="'+valImg+'"></a></td>';
        jQuery(activeTar).append(valCode);
        if(y == 6){
            jQuery(activeTar).removeClass("active");
            y = -1;
        }
    }
}
jQuery(".toggleAdd").live("click", function(){
    jQuery("input", jQuery(this).closest('form')).val(jQuery("input", jQuery(this).closest('form')).val() + jQuery(this).attr("data-icon"));
});
4

2 回答 2

1

如果我理解正确，您只需要删除以下行：

y = -1;

并更改以下 for 循环：

for(var i = 0; i < newVals.length; i++){

对于这个：

for(var i = 0; i < newVals.length; i = i + 7){

并替换您的以下行：

var valId = newVals[i];

对于这个：

var valId = newVals[i + y];
于 2012-09-23T17:24:09.217 回答
1

好像你有一个"active"类只是为了做 DOM selecto 插入到正确的行中。

没必要。只需将行保存在变量中，附加到它，然后每七个项目创建并保存一个新行。

var newVals = new Array("1", "2", "3", /*...,*/ "81"),
    target = jQuery(".content table"),
    activeRow;

$.each(newVals, function(i, valId) {
    if(i % 7 === 0)
        activeRow = jQuery('<tr></tr>').appendTo(target);

    activeRow.append('<td class="cell"><a class="toggleAdd" tabindex="0" data-icon="'+valId+'"><img src="http://sub.domain.com/' + valId + '/picture"></a></td>');
});

这使用模运算符来确定是否是时候创建一个新行了。

关于处理程序，如果您使用变量，您可以稍微清理一下。此外，如果您使用的是 jQuery 1.7 或更高版本，则应on使用live.

jQuery(document).on("click", ".toggleAdd", function(){
    var input = jQuery(this).closest('form').find("input"),
        v = input.val() + jQuery(this).attr("data-icon");

    input.val(v);
});

您应该替换document为代表包含所有.toggleAdd元素的最深容器的选择器。

于 2012-09-23T17:35:13.787 回答