Question

今天我在javascript中开始使用OO，我创建了3个块（每个对象）

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

我附加块的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 = {};

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

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

获取和对象的“活动”属性

1 个答案: