0

JSFIDDLE

我创建了一个按钮，每次单击它都会创建一个“人”。此人有一个随机 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/

新人应该有一个随机的颜色，并且该颜色永远不会再改变。我希望你能帮助我让它工作，但也能理解如何。

4

4 回答 4

1

是因为您将新人称为 .person 类而不是 id 吗？所以它会改变所有人 div 的颜色，而不仅仅是新创建的？

改变

$('.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-24T22:02:45.623 回答
1

您需要更改为以下代码行以引用您设置为新 div 的 ID，而不是 Person 类（目前是这样）：

从 ：

$('.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-24T22:04:47.137 回答
1

您使用 .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-24T22:05:11.160 回答
0

代替

$('.Person')

采用

var $person = $( '.Person#' + iRandomId )
于 2013-09-24T22:05:15.410 回答