0

today I'm starting on OO in javascript, I've created 3 blocks ( an object each)

I append the, to the html code after creating them, but when I click on one of this objects it doesn't returns me the ACTIVE attribute.

HTML container where I append the blocks :

<div id="llens"> </div>

JQUERY:

 $(document).ready(function() {



/**********************************  CREAtING OBJECT--> BLOC  *************************************************/




function bloc(nom, top, left ,amplada,altura , actiu ){
    this.nom=nom;
    this.top = top+'px';
    this.left= left+'px';
    this.amplada= amplada+'px';
    this.altura = altura+'px';
    this.actiu = actiu;


}

function creaBloc (){
    bloc_profes = new bloc('bloc_profes', '40', '200','800','200','false');
    bloc_text = new bloc('bloc_text','100', '200','800','100','false');
    bloc_alumnes = new bloc('bloc_alumnes', '200', '200','800','200','false');

    var bloc1 = $('<div class="bloc professor" id="'+bloc_profes.nom+'" style="top:'+bloc_profes.top+'; left:'+bloc_profes.left+'; width:'+bloc_profes.amplada+'; height:'+bloc_profes.altura+' " >');
    var bloc2= $('<div class="bloc text" id="'+bloc_text.nom+'" style="top:'+bloc_text.top+'; left:'+bloc_text.left+'; width:'+bloc_text.amplada+'; height:'+bloc_text.altura+' " >');
    var bloc3 = $('<div class="bloc alumne" id="'+bloc_alumnes.nom+'" style="top:'+bloc_alumnes.top+'; left:'+bloc_alumnes.left+'; width:'+bloc_alumnes.amplada+'; height:'+bloc_alumnes.altura+' " >');

    $('#llens').append(bloc1);
    $('#llens').append(bloc2);
    $('#llens').append(bloc3);
}

creaBloc();

        $(".bloc").click(function (event) {
        event.stopPropagation();

         bloc_nom = event.target.id; // New selected target

         console.log('NOM: '+bloc_nom);
         console.log('Actiu? : '+bloc_nom.actiu);


         });


    });
4

1 回答 1

3

没有什么可以将您的对象和 DOM 元素联系在一起。考虑到您当前的结构，您可以将所有 bloc 对象包装在另一个对象中：

// On the top scope inside document.ready
var blocs = {};

然后创建块并附加到该对象：

blocs['bloc_profes'] = new bloc('bloc_profes', 40, 200, 800, 200, false);
blocs['bloc_text'] = new bloc('bloc_text', 100, 200, 800, 100, false);
blocs['bloc_alumnes'] = new bloc('bloc_alumnes', 200, 200, 800, 200, false);

因此，您将能够在事件处理程序中执行此操作：

$(".bloc").click(function (event) {
    event.stopPropagation();
    var bloc_nom = this.id;
    var bloc = blocs[bloc_nom];
    console.log('Actiu? : ' + bloc.actiu);
});

另一种方法是使用 jQuery.data将它们直接绑定在一起creaBloc：

bloc1.data('bloc', bloc_profes);

然后在事件监听器中你做：

$(".bloc").click(function (event) {
    event.stopPropagation();
    var bloc = $(this).data('bloc');
    console.log('Actiu? : ' + bloc.actiu);
});
于 2013-08-06T22:22:18.203 回答