javascript - 获取and对象的 'Active'属性

Question

今天我开始使用 javascript 进行面向对象，我创建了 3 个 block (每个 block 一个对象)

我在创建它们后将 附加到 html 代码中，但是当我单击其中一个对象时，它不会返回 ACTIVE 属性。

我在其中附加 block 的 HTML 容器:

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


         });


    });

Answer 1

没有任何东西将你的对象和 DOM 元素联系在一起。考虑到您当前的结构，您可以将所有 bloc 对象包装在另一个对象中:

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

然后创建 block 并附加到该对象:

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 中绑定(bind)在一起:

bloc1.data('bloc', bloc_profes);

然后在事件监听器中执行以下操作:

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