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 クラス (現在の状態) ではなく、新しい div に設定した ID を参照するには、次のコード行に変更する必要があります。

から ：

$('.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 に答える
1

新しい人物を id ではなく class .person と呼んでいるためですか? それで、新しく作成されたものだけでなく、すべての人の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 に答える
0

それ以外の

$('.Person')

使用する

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