Справка по дизайну кода Javascript - PullRequest
Новая
       12

Справка по дизайну кода Javascript

3 голосов
/ 24 марта 2011

Я пишу скрипт, используя jQuery для добавления нескольких блоков управления (div) на веб-страницу.Эти div содержат элементы управления (якоря), такие как close, prev, next, search и т. Д. Пример кода: 

$div_overlay = 
    $('<div></div>')
    .addClass('overlay')
    .append($('<div></div>')
        .addClass('text_controls')
//The onClick method below works perfect but not .click() of jQuery(due to the way 'index' is used)
        .append($('<a onClick="overlay_hide('+index+'); return false;"></a>')
            .addClass('close')
            .attr('href','#')
            /*.click(function(){
//The 'index' gets incremented as divs are created and hence a wrong value(the last one) is passed irrespective of the div clicked 
            overlay_hide(index)
            })*/
        )

'index' - это глобальная переменная для отслеживания созданных div-оверлеев.Он увеличивается по мере создания div, и каждый div помещается в массив по мере его создания.Итак, «index» - это в основном индекс массива div.

Для простоты я добавил только якорь «close».$ Div_overlay находится в функции, которая вызывается каждый раз при нажатии на изображение.

Моя проблема заключается в обработке событий щелчка для якорей, таких как «закрыть».Я хотел бы идентифицировать div, для которого кликнул якорь, используя 'index', который является глобальной переменной.

Я хотел бы иметь возможность передать ссылку на div, для которого выполняется действие закрытия,Если я использую метод щелчка jQuery, который прокомментирован в приведенном выше коде, чтобы закрыть div, он передает последнее значение индекса в качестве параметра overlay_hide () (поскольку индекс увеличивается по мере создания div).Если я использую метод onClick, как указано выше, он работает нормально, передавая правильное значение индекса.

Итак, как мне идентифицировать эти div с помощью индексов и иметь возможность уникального доступа к ним в зависимости от того, какой элемент управления div выбран?(Возможно, нужно использовать объекты, но я не уверен.)

Один из способов - получить родительский элемент привязанной привязки, но я не хочу делать это таким образом и хотел бы использовать индекс.

Ответы [ 4 ]

1 голос
/ 24 марта 2011

Было бы намного проще использовать класс overlay, который находится в контейнере: 

$('body').delegate('a.close', 'click', function() {
  $(this).closest('div.overlay').hide();
});

Просто настройте это и тому подобное для других типов управления, и тогда вам не придется беспокоиться о том, чтобы вставлять эти уродливые обработчики DOM0 в добавленные вами теги.

Я знаю, что вы сказали, что «не хотите делать это таким образом», но если вы не можете объяснить, почему такое упражнение вообще ценно, кажется неэтичным не рекомендовать самый очевидный способ решения проблемы. .

1 голос
/ 24 марта 2011

Вы должны прочитать о замыканиях и области видимости в JS: http://bonsaiden.github.com/JavaScript-Garden/#function.closures

Быстрое решение вашей проблемы: 

var closeButton = (function(index){
    return $('<a></a>').addClass('close').attr('href','#').click(function(){
        overlay_hide(index);
    })
})(index);
var $div_overlay = $('<div></div>').attr('id','overlay').append(
    $('<div></div>').addClass('text_controls').append(closeButton)
)
1 голос
/ 24 марта 2011

Вы можете добавить метаданные в привязку с атрибутом данных. 

$('<a data-index="' + index + '"></a>').click(function(){
    var data = $(this).data();
    overlay_hide(data.index); // note index will be a string
    return false;
});

Другой способ сделать это - закрыть функцию щелчка: 

$('<a />').click(function(i){
    return function(e){
        // use i here this is the callback.
        overlay_hide(i);
        return false;
    };
}(index));

Я также хотел бы отметить, что у вас есть добавляемый идентификатор .attr('id','overlay') - и идентификаторы должны быть уникальными в DOM.

0 голосов
/ 24 марта 2011

Я думаю, вам нужно использовать функцию live (), прочитайте это:

http://api.jquery.com/live/

...