使用Javascript/jQuery创建内容

我已经通过使用jQuery为列表中的每个项目创建了相同的内容，从而创建了我的内容的一部分。它除了最后一个入口之外都完美运行。出于某种原因，它的行为很奇怪。使用Javascript/jQuery创建内容

为每个只接受2个字符的条目创建输入字段。我有一个错误脚本将解析条目并查看它是否有效。在这种情况下，我只接受61以下的数字。除最后一个输入外，所有输入都可以工作。

此外，创建的3个输入的标签不会将焦点放在该条目的相关输入值上。

我的问题是我不知道为什么最后一项不起作用，而其他人会。有人可以解释吗？

以下是一些使用的功能。

Populate.js（用于创建从列表内容）

var $parent = $('div#heroes'); 
var prestige = '<option value="0">None</option><option value="1">Prestige 1</option><option value="2">Prestige 2</option><option value="3">Prestige 3</option><option value="4">Prestige 4</option><option value="5">Prestige 5</option>' 
$.each(heroes, function(index,value) { 
    $div = $('<div id="hero' + index + '"></div>'); 
    $div.append('<h6>' + value + '</h6>'); 
    $div.append('<span id="active"><input type="checkbox" id="isActive' + index + '" /><label for="isActive' + index + '">Is Active?</label></span>'); 
    $div.append('<span id="level"><label for="level' + index + '">Level:&nbsp;</label><input type="text" size="2" maxlength="2" id="level' + index + '" /></span>'); 
    $div.append('<span id="prestige"><label for="prestige' + index + '">Prestige:&nbsp;</label><select id="prestige' + index + '">' + prestige + '</select></span>'); 

    $parent.append($div); 
});

errors.js（解析的输入值和输出错误，如果不低于61一个整数）

$.each(heroes, function(index,value){ 
    $('input#level' + index).change(function() { 
     var val = $('input#level' + index).val(); 
     if(val > 60) { 
      alertify.log("Hero " + value + " cannot be above Level 60!", "", 0); 
      $('#level' + index).addClass('error'); 
     } else if(isNumeric(val)) { 
      if($('#level' + index).hasClass('error')) { 
       $('#level' + index).removeClass('error'); 
      } 
     } else { 
      alertify.log("Only numbers are accepted."); 
      $('#level' + index).addClass('error'); 
     } 
    }); 
}); 

function isNumeric(num){ 
    return !isNaN(num); 
}

列表使用：

var heroes = ["Black Panther","Black Widow","Cable","Captain America","Colossus","Cyclops","Daredevil","Deadpool",/*"Doctor Strange",*/"Emma Frost", 
"Gambit","Ghost Rider","Hawkeye","Hulk","Human Torch","Iron Man","Jean Grey",/*"Juggernaut",*/"Loki","Luke Cage",/*"Magneto","Moon Knight",*/"Ms Marvel", 
"Nightcrawler",/*"Nova","Psylocke",*/"Punisher","Rocket Raccoon",/*"Silver Surfer",*/"Scarlet Witch","Spider-Man","Squirrel Girl",/*"Star-Lord",*/"Storm", 
/*"Sue Storm",*/"Thing","Thor","Wolverine"/*,"Venom"*/];

您可以在http://spedwards.cz.cc/new.html

0查看页面

我仍然接受答案。我很难理解为什么这不能按预期工作。

来源

2014-02-07 Spedwards

好吧，我想出了我的问题。我使用bx-slider插件，它创建第一个元素之前的最后一个元素的克隆，并在最后一个之后创建第一个元素的克隆。所以我的功能是克隆。我只需要将:not(.bx-clone)添加到选择器中。

因此，而不是$('input#level' + index);它更改为$('input#level' + index + ':not(.bx-clone)');

来源

2014-02-09 02:15:08 Spedwards

使用Javascript/jQuery创建内容

回答

相关问题