Я создал кнопку, где "человек" создается каждый раз, когда вы нажимаете на него. У человека есть случайный идентификатор (не уникальный, я знаю). Следующим шагом является назначение каждому из людей случайного цвета фона при их создании.
До сих пор я достиг того, что каждый раз, когда создается новый человек, все люди меняют свой цвет:
$('#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/
Новый человек должен иметь случайный цвет, и этот цвет никогда не должен изменяться снова. Я надеюсь, что вы можете помочь мне заставить его работать, но и понять, как это сделать.
Это потому, что вы обращаетесь к новому человеку как к классу.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/
Вы используете класс.Person. Но каждый из ваших персонажей имеет один и тот же класс. Используйте идентификатор, чтобы выбрать свой элемент: 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();
});
Вам нужно перейти к следующим строкам кода, чтобы ссылаться на идентификатор, который вы установили на новый div, а не на класс 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();
Вместо
$('.Person')
использование
var $person = $( '.Person#' + iRandomId )