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

时间:2013-09-24 21:59:01

标签: javascript jquery css random jquery-data

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 个答案:

答案 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);

这似乎有效:http://jsfiddle.net/fVtVL/6/

答案 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 )