我创建了一个按钮,每次点击它时都会创建一个“人物”。这个人有一个随机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/
新人应该有一个随机颜色,这种颜色永远不会再变化。我希望你可以帮助我使它工作,但也要了解如何。
答案 0 :(得分:2)
是不是因为你把新人称为班级而不是id? 所以它改变了所有人div的颜色,而不仅仅是新创建的div?
更改
$('.Person').data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor);
到
$('#'+iRandomId).data('current-elem-id', iDivPersonId, oPerson).css('background-color', sColor);
答案 1 :(得分:2)
您需要更改为以下代码行,以引用您设置为新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();
答案 2 :(得分:2)
您使用的是.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();
});
答案 3 :(得分:0)
而不是
$('.Person')
使用
var $person = $( '.Person#' + iRandomId )