分配随机background.color对象随机ID

我创建在其中创建一个“人”，你点击它，每次一个按钮。这个人有一个随机ID（我知道不是唯一的）。下一步是在创建时为每个人分配一个随机背景颜色。

我到目前为止已经完成的是，每一个新的人被创建的时候，所有的人都改变了他们的颜色：

$('#BtnCreatePerson').click(function(){ 
var sPersonName = $('#PersonName').val(); 
var sPersonLastName = $('#PersonLastName').val(); 
var sPersonAge = $('#PersonAge').val(); 
var sPersonGender = $('#PersonGender').val(); 
var sColor = GetMeARandomColor(); 

var iRandomId = GetRandomNumber(999999, 99999999999); 

var iDivPersonId = $(this).attr('id'); 
$('.Person').data('current-elem-id', iDivPersonId, oPerson); 

var oPerson = new Person(); 
oPerson.setId(iRandomId); 
aPeople.push(oPerson); 
console.dir(aPeople); 


$('.PersonContainer').append('<div id="'+iRandomId+'" class="Person" title="'+sPersonName+'" ></div>') 
$('.Person').data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor); 

$('.Person').draggable();      

});

随机颜色功能：

function GetMeARandomColor() 
{ 
var aEverything = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"] 
var sTheColor = "#"; 
for(i=0; i < 6; i++) 
{ 
    iRandomNumber = Math.floor(Math.random()* 16); 
    sTheColor += aEverything[iRandomNumber]; 
    //console.log(sTheColor); 
} 
return sTheColor; 
}

你可以检查整个代码在这里：http://jsfiddle.net/Adnaves/fVtVL/

新人应该有一个随机的颜色，该颜色不应该再次改变。我希望你能帮助我做到这一点，但也希望你能理解如何。

来源

2013-09-24 Adnaves

难道是因为你把新人称为class .person而不是id？因此，它会改变所有人格的颜色，而不仅仅是新创建的人物？

变化

$('.Person').data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor);

到

$('#'+iRandomId).data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor);

这似乎工作：http://jsfiddle.net/fVtVL/6/

来源

2013-09-24 22:02:45

漂亮的代码了。我很享受创造大量新人！ :) –

非常感谢。我很高兴你享受它。 ;-) – Adnaves

你需要改变的代码下面几行您所设定的ID参照新的div，而不是Person类（与目前一样）：

From ：

$('.Person').data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor); 

$('.Person').draggable();

要：

$('#' + iRandomId).data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor); 

$('#' + iRandomId).draggable();

来源

2013-09-24 22:04:47 Nunners

您使用的类.Person。但是你的每个人都有同一个班级。使用id选择你的元素：http://jsfiddle.net/fVtVL/7/

$('#BtnCreatePerson').click(function(e){ 
    var sPersonName = $('#PersonName').val(); 
    var sPersonLastName = $('#PersonLastName').val(); 
    var sPersonAge = $('#PersonAge').val(); 
    var sPersonGender = $('#PersonGender').val(); 
    var sColor = GetMeARandomColor(); 
    // Memory 
    var iRandomId = GetRandomNumber(999999, 99999999999); 

    var iDivPersonId = $(this).attr('id'); 
    $("#"+iRandomId).data('current-elem-id', iDivPersonId, oPerson); 

    var oPerson = new Person(); 
    oPerson.setId(iRandomId); 
    aPeople.push(oPerson); 
    console.dir(aPeople); 
    // Layout 
    $('.PersonContainer').append('<div id="'+iRandomId+'" class="Person" title="'+sPersonName+'" ></div>') 
    $("#"+iRandomId).data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor); 
    //.data(element, key, value) 
    //$(e.target).css('background-color', sColor); 
    $("#"+iRandomId).draggable();      

});

来源

2013-09-24 22:05:11

改用的

$('.Person')

var $person = $('.Person#' + iRandomId)

来源

2013-09-24 22:05:15 redolent

分配随机background.color对象随机ID

回答

相关问题