зацикливание на объекте js

Question

у меня есть этот объект js:

var tags = [{ 'x' : '42','y' : '25','id' : '1', 'linea' : '1'},{ 'x' : '378','y' : '24','id' : '2', 'linea' : '1'}];

Я пытаюсь выполнить цикл таким образом:

for(var i = 0; i < tags.length; i++){

            var x = tags[i].x -10;
            var y = tags[i].y -10;


            var offsetX = x + 20;
            var offsetY = y + 20;


            if( left >= x && left <= offsetX ){ 

                $(myDiv).bind('click',function(){
                    document.location.href = 'x.php?a='+ tags[i].linea +'&b=' + tags[i].id;
                }).css('cursor','pointer');

            }else{
                $(myDiv).unbind('click').css('cursor','none');
            }
        }

Но я проиграл первый! Это правильный путь ?? Спасибо!

Answer 1

Вы не потеряете первое (звучит так, как будто это был ключ от машины).Ваша проблема - ваша анонимная функция, которая закрывается за родительской областью при выполнении (для вашего .bind() метода).Он создает то, что мы называем Closure .

Это очень распространенная ошибка в ECMAscript там.Вам необходимо вызвать дополнительный контекст, чтобы избежать этой проблемы.

$(myDiv).bind('click',(function( index ){
    return function() {
        document.location.href = 'x.php?a='+ tags[index].linea +'&b=' + tags[index].id;
    };
}( i ))).css('cursor','pointer');

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

Кроме того, похоже, что вы привязываете обработчики событий нескольких кликов к одномуэлемент myDIV.Каждый обработчик заставит браузер перенаправить на другой URL, поэтому это вызовет проблемы.Я даже не могу сказать, выиграет ли первый или последний хендлер в этой гонке.

Answer 2

Переменная область видимости .. измените это и оно должно работать нормально:

var lineA = tags[i].linea;
var id = tags[i].id;
$(myDiv).bind('click',function(){
    document.location.href = 'x.php?a='+ lineA  +'&b=' + id;
}).css('cursor','pointer');

Проблема в том, что i является итератором цикла, поэтому при нажатии myDiv у него всегда будет последнее значение.

Редактировать : посмотрев на это, я понял, что вы выбрали неправильный подход. После этого вы определяете, где пользователь нажал внутри <div> и перенаправил в другое место в соответствии с вашим массивом. Для этого должен работать такой код:

var tags = [{ 'x' : '42','y' : '25','id' : '1', 'linea' : '1'},{ 'x' : '378','y' : '24','id' : '2', 'linea' : '1'}];

$("#myDiv").bind('click',function(event) {
    var left = event.pageX - $(this).position().left;
    for(var i = 0; i < tags.length; i++){    
        var x = tags[i].x -10;
        var y = tags[i].y -10;
        var offsetX = x + 20;
        var offsetY = y + 20;
        if( left >= x && left <= offsetX ){ 
            var lineA = tags[i].linea;
            var id = tags[i].id;
            document.location.href = 'x.php?a='+ lineA  +'&b=' + id;
            break;
        }
    }
});

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

Тестовый случай .

Редактировать 2 : «кликабельные» части элемента с другим курсором проще, чем я думал, вам просто нужно обработать событие onmousemove и установить курсор там:

var posLeft = $("#myDiv").position().left;

$("#myDiv").bind('click',function(event) {
    var tag = GetHoveredTag(event);
    if (tag) {
        var lineA = tag.linea;
        var id = tag.id;
        document.location.href = 'x.php?a='+ lineA  +'&b=' + id;
    }
}).bind("mousemove", function(event) {
    var tag = GetHoveredTag(event);
    var cursor = (tag) ? "pointer" : "";
    $(this).css("cursor", cursor);
});

function GetHoveredTag(event) {
    var left = event.pageX - posLeft;
    for(var i = 0; i < tags.length; i++){    
        var x = tags[i].x -10;
        var y = tags[i].y -10;
        var offsetX = x + 20;
        var offsetY = y + 20;
        if( left >= x && left <= offsetX )
            return tags[i];
    }
    return 0;
}

Обновленная скрипка .