Как ссылаться на переменную, как это было в цикле?

С помощью следующего кода я хочу войти в консоль 1, 2 и 3 в зависимости от прямоугольника под указателем. Я всегда получаю последнее значение, три.

Я не понимаю, почему и как решить проблему.

<script src = "https://unpkg.com/[email protected]/konva.min.js"></script>

<div id = "container"></div>
 
<script>
var stage = new Konva.Stage({
    container: 'container',
    width: 100,
    height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (var i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", function() {
	    console.info(i);
    });
}
   
stage.draw();

</script>

javascript loops variables konvajs

11.11.2018 22:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда ваше событие mousemove происходит, i уже есть и всегда будет 3

Попробуйте использовать let i=0 вместо var i=0. с let ваша переменная i будет в области локального цикла, поэтому будет связана с layer

Код:

 var stage = new Konva.Stage({
     container: 'container',
     width: 100,
     height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (let i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", function() {
	    console.info(i);
    });
}
   
stage.draw();

<script src = "https://unpkg.com/[email protected]/konva.min.js"></script>

<div id = "container"></div>

Другой вариант - передать i в вашу функцию-обработчик:

var stage = new Konva.Stage({
    container: 'container',
    width: 100,
    height: 100
});

var layer = new Konva.Layer();
stage.add(layer);
 
for (var i=0; i<3; ++i) {
    var rect = new Konva.Rect({
        x: 10,
        y: 30*i,
        width: 50,
        height: 20,
        fill: "red",
        stroke: "black",
        strokeWidth: 4
    });
   
    layer.add(rect);
   
    rect.on("mousemove", (function(i) {
        return function(e) { 
            console.info(i)
        };
    })(i));
}
   
stage.draw();

<script src = "https://unpkg.com/[email protected]/konva.min.js"></script>

<div id = "container"></div>

Я использую старый код javascript и не могу использовать let

— 11.11.2018 22:54

Я обновил ответ

— 11.11.2018 23:11

11.11.2018 22:53

Другие вопросы по теме

Отсортируйте список Java List <String>, передав строку и поместив эту строку в последний индекс

Сравните значения словаря, принадлежащие разным ключам

Как перебрать массив JSON?

Получение данных из Spotify Top Charts с помощью spotifyr

Pandas iterrows перезаписывает значения

Читать символы из одной строки, включая пробелы, а не из новой строки

Сложный многомерный массив

Переменная определяет значение ячейки, но вызывает пользовательскую функцию и выполняется после

Перебор всех строк с несколькими условиями

Разделение существующих файлов на несколько файлов, содержащих определенные поля соответственно

Как ссылаться на переменную, как это было в цикле?

Ответы 1

Другие вопросы по теме

Похожие вопросы