Щелкните поверхность, чтобы выбрать неправильную поверхность.

С помощью цикла for я создаю 10 разных поверхностей. Щелкнув по одному из них, я хочу получить содержимое этой поверхности. Но это не работает. вместо этого я всегда получаю содержимое последней созданной поверхности (в моем случае это 9). Что мне нужно изменить, чтобы получить содержимое выбранной (щелкнутой) поверхности, а не содержимое последней созданной?

вот мой код:

for (f = 0; f < 10; f++) {
        var draggable = new Draggable({
            xRange: [0, 1000],
            yRange: [0, 1000]
        });

        var surface = new Surface({
            size: [true, true],
            content: f,
            properties:{
                fontSize:'16px',
                cursor: 'pointer',
                borderRadius:'50px',
                backgroundColor: '#C0C0C0',
                border:'solid'
            }
        });

        surface.on("click",function(){alert(surface.content)});

        surface.pipe(draggable);        
        mainContext.add(draggable).add(surface);
  }

surface famo.us
person user2988098    schedule 14.10.2014    source источник
comment
обертывание создания поверхности и обработчика событий внутри функции и вызов функции также исправят это. Но вы должны поставить плюс / проверить ответ, так как это правильно.   -  person aintnorest    schedule 15.10.2014
comment
Я также должен привести пример правильного вызова функции, привязывающей ее к поверхности, чтобы показать лучшую практику.   -  person talves    schedule 15.10.2014
comment
Да, это было бы хорошо   -  person user2988098    schedule 16.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Выбирается правильная поверхность. Проблема заключается в ссылке на surface.content функции щелчка. Ссылка на поверхность заменяется каждый раз, пока не останется последняя поверхность. Ссылка на текущую поверхность, по которой щелкнули, используя this.content в функции, потому что this привязана к текущей поверхности, по которой щелкнули, в функции щелчка.

Пример кода здесь

for (f = 0; f < 10; f++) {
    var draggable = new Draggable({
        xRange: [0, 1000],
        yRange: [0, 1000]
    });

    var surface = new Surface({
        size: [true, true],
        content: f,
        properties: {
            fontSize: '16px',
            cursor: 'pointer',
            borderRadius: '50px',
            backgroundColor: '#C0C0C0',
            border: 'solid'
        }
    });

    surface.on("click", function () {
        alert(this.content)
    });

    surface.pipe(draggable);
    mainContext.add(draggable).add(surface);
}
person talves    schedule 14.10.2014
comment
Подъем вручную путем перемещения объявлений переменных за пределы цикла for устранит двусмысленность в отношении области действия уровня блока. Просто заметка. - person sabithpocker; 16.10.2014
comment
Вы можете увидеть мой комментарий выше, в котором я упомянул пример лучших практик, но это дает ему объяснение быстрого исправления на данный момент. Спасибо за напоминание о комментарии. - person talves; 17.10.2014