Назначить случайный background.color для объектов со случайным идентификатором

Question

Назначить случайный background.color для объектов со случайным идентификатором

0

Я создал кнопку, где "человек" создается каждый раз, когда вы нажимаете на него. У человека есть случайный идентификатор (не уникальный, я знаю). Следующим шагом является назначение каждому из людей случайного цвета фона при их создании.

До сих пор я достиг того, что каждый раз, когда создается новый человек, все люди меняют свой цвет:

$('#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/

Новый человек должен иметь случайный цвет, и этот цвет никогда не должен изменяться снова. Я надеюсь, что вы можете помочь мне заставить его работать, но и понять, как это сделать.

Adnaves 25 сен. 2013, в 00:56

Источник

Теги:

javascript

jquery

css

random

jquery-data

4 ответа

2

Вы используете класс.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();                     

});

Donovan Charpin 24 сен. 2013, в 20:46

2

Вам нужно перейти к следующим строкам кода, чтобы ссылаться на идентификатор, который вы установили на новый 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();

Nunners 24 сен. 2013, в 20:03

0

Вместо

$('.Person')

использование

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

redolent 24 сен. 2013, в 20:59

Ещё вопросы

Dicky Moore · Accepted Answer · 2013-09-24T20-19-00.000Z

Это потому, что вы обращаетесь к новому человеку как к классу.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/

Хороший код тоже. Мне нравится создавать много новых людей! :)
Огромное спасибо. Я рад, что ты наслаждаешься этим. ;-)