使用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創建內容

回答

相關問題