Nano Hash - криптовалюты, майнинг, программирование

Дизайн нескольких ящиков Javascript

Я пишу скрипт, используя 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 помещается в массив по мере его создания. Таким образом, «индекс» — это, по сути, индекс массива div.

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

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

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

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

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

javascript jquery dom javascript-framework jquery-events
24.03.2011

  • Вы не должны давать одно и то же значение идентификатора нескольким элементам. Если вы дали им уникальные значения идентификатора, все, что вам нужно сделать, это проверить, в каком <div> находится элемент управления, на который нажали. 24.03.2011
  • Я отредактировал свой пост, чтобы удалить идентификатор. Это была моя ошибка. Я не хочу идентифицировать их по идентификатору или имени класса. Я хотел бы знать, как идентифицировать эти динамически созданные div, которые я храню в массиве, по их значениям индекса, когда якорь щелкается в одном из этих div. Моя проблема в том, что когда событие запускается, я хочу, чтобы обработчик передал правильный идентификатор для div, в котором щелкнут якорь, чтобы я мог закрыть этот div. 24.03.2011
  • Можете ли вы объяснить, почему вы не хотите добавлять идентификатор или значение класса? Я бы так и поступил, потому что это сделало бы все очень простым. 24.03.2011
  • Что ж, я согласен с тем, что было бы легко использовать идентификатор или классы, и я не против этого, но я хотел бы знать другие способы, которыми я мог бы это сделать, например, используя индекс для массива, в котором они хранятся. На самом деле я хотел узнать, как справляться с такой проблемой кодирования, когда глобальная переменная будет использоваться внутри обработчика событий, и обработчик должен использовать это значение глобальной переменной, когда функция обработчика определена, но не измененное значение, когда глобальная переменная обновляется после определения функции. 24.03.2011

Ответы:


1

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

$('<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.

24.03.2011
  • @Pointy - нет, это превратит свойства данных в объект javascript, ключом которого является data-key. 24.03.2011
  • Ах хорошо, я понимаю, что вы имеете в виду; правильно. Если бы это был я, я бы поместил данные в контейнер <div>, а не в отдельные элементы <a>, потому что тогда один обработчик мог бы просто определить, что делать, самой структурой DOM. На самом деле ему вообще не нужен идентификатор; контейнер оверлея может просто получить оверлей класса, а затем обработчик будет искать .closest('div.overlay') в качестве цели операции. 24.03.2011

    • 2

    Вы должны прочитать о замыканиях и области видимости в 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)
)
    24.03.2011

    3

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

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

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

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

    24.03.2011
  • спасибо за ваши идеи по использованию .closest(). Я знал, что мы можем сделать это с помощью классов, но я думал об использовании .parent() или чего-то в этом роде и не придавал этому особого значения. Однако, поскольку я начал использовать индексный подход для получения правильного div и застрял с использованием глобальных переменных внутри обработчиков, я хотел знать принципы кодирования для достижения этой цели. 24.03.2011

    • 4

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

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

    24.03.2011
  • Что это за ответ? объясните, что вы имеете в виду, или это ужасный ответ. 24.03.2011
  • успокойтесь, live() применяется к добавленному div и его click(), это поможет добавить щелчок и избежать onClick, по крайней мере, я так думаю. P.S. ОП говорит: Моя проблема заключается в обработке событий щелчка, в прямом эфире будет добавлено событие щелчка. 24.03.2011
  • На самом деле я думаю, что использование одного обработчика с .delegate() или .live() на самом деле было бы лучшим и самым простым способом сделать это. Однако было бы неплохо, если бы @jackJoe предоставил хотя бы скелетный пример. 24.03.2011
  • Я бы согласился, что жить или делегировать было бы лучше, особенно если этих динамических наложений много. Но чтобы ответить на этот вопрос, вы должны сказать кое-что о том, как обращаться с индексом. 24.03.2011
  • Я согласен с @Josiah Ruddell. Я хотел бы знать, как идентифицировать эти динамически созданные div, которые я храню в массиве, по их значениям индекса, когда якорь щелкается в одном из этих div. Однако я не понимаю, почему я должен использовать здесь .live(). У меня нет проблем с присоединением обработчика событий к моим якорям. Моя проблема в том, что когда событие запускается, я хочу, чтобы обработчик передал правильный идентификатор для div, в котором щелкнут якорь, чтобы я мог закрыть этот div. 24.03.2011
  • @Pointy и @jackJoe Как .live() решит мою проблему? У меня нет проблем с присоединением обработчиков событий для якорей, поскольку каждый созданный якорь имеет свой метод .click(). Я хочу знать, как я могу передать правильный индекс в методе overlay_hide() 24.03.2011
  • Я думал, что у вас есть проблема с привязкой события click(), и это то, что решит live(), и именно поэтому я предложил это, но для решения проблемы индекса я думаю, что использование классов (см. третий комментарий Pointy к сообщению Josiah Ruddell) лучший способ, у меня тоже есть проблемы с индексами, и я обычно прибегаю к использованию имени класса. 24.03.2011
  • @jackJoe Понял тебя. Занятия будут безопасными. Я просто объяснил в своем комментарии к вопросу о том, что я на самом деле пытаюсь сделать. Я думаю, что решение Джозайи Радделла касается того, что я пытаюсь сделать. 24.03.2011
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..