Доступ к брату атрибута в объекте, onclick javascript - PullRequest
Новая
       32

Доступ к брату атрибута в объекте, onclick javascript

0 голосов
/ 04 декабря 2018

Я создаю 5 objects, каждый с div, прикрепленным как атрибут source, при котором onclick должен открывать относительную HTML-страницу в iframe.

Требуется доступпростое значение i==[i].num для каждого элемента на onclick function, поэтому, чтобы выбрать actor[i].num из actor[i].source, думал, что это должно быть просто. 

// html
<div id="op0" class="op"><img src="gfx/0.svg"></div>
<div id="op1" class="op"><img src="gfx/1.svg"></div>
<div id="op2" class="op"><img src="gfx/2.svg"></div>
<div id="op3" class="op"><img src="gfx/3.svg"></div>
<div id="op4" class="op"><img src="gfx/4.svg"></div>

// js
var i=0;
let actor = {};
    for (i = 0; i < 5; i++) { 
        actor[i] = {
            num: i,
            source: document.getElementById('op'+[i]),
            clicked: 0 
        }
        actor[i].source.addEventListener( 'click', function() { 
            console.log(this) // the source attribute <div>
            console.log(this.num) // undefined
            console.log(parent.num) // undefined
            console.log(actor[i].num) // TypeError
            clickActor(i) // returns 5 at the time of click
        });
}

function clickActor(num){
    if (actor[num].open == 0){
        actor[num].source.classList.add("scaleUp");
        document.getElementById("iFrame").src = "op"+num+".html";
        actor[num].open = 1;
        // div to move and scale
    } else {
        actor[num].source.classList.remove("scaleUp");
        document.getElementById("iFrame").src = "";
        document.getElementById("iFrame").style.pointerEvents = "none";
        actor[num].open = 0;
        // div to move and scale back
    }
}

1 Ответ

0 голосов
/ 04 декабря 2018

var переменные являются областями функций, поэтому ваша переменная i многократно используется в вашем цикле, так что, когда вы на самом деле нажмете кнопку, i будет последним номером цикла.Вы можете обойти это, просто создав новую область действия функции, вставив вместо функции обратного вызова самовыполняющуюся функцию. 

actor[i].source.addEventListener( 'click', (function(i) {
  return (function() { 
    console.log(actor[i].num) // this is should print out the object assign above it
    clickActor(i) // i is now the index of the actor
  });
})(i));
...