Jquery работает только один раз на дубликате элемента

0

здесь: http://jsfiddle.net/gorelegacy/bn6Z2/

$(document).ready(function(e) {
    $("#directions").click(function(e) {
        $("#map").slideToggle('fast');
    });
});

Это код, над которым я работаю выше.

У меня есть простой slidetoggle в тексте "получить направления". Но он работает только на номер 1. Затем он не работает для 2-го и 3-го "направлений",

  • 2
    Вы понимаете, что значение идентификатора ДОЛЖНО быть уникальным в документе? Вы можете иметь только один элемент с заданным идентификатором. Когда вы ссылаетесь на такой идентификатор, как $("#directions") , он только когда-либо найдет первый с таким идентификатором. Используйте class="directions" и затем $(".directions") если вы хотите иметь более одного.
  • 0
    если бы я понял, что я не буду публиковать здесь. У тебя есть решение
Показать ещё 2 комментария
Теги:

2 ответа

3
Лучший ответ

Изменение моего комментария в ответе.

У вас может быть только один элемент в документе с заданным идентификатором, поэтому $("#directions") найдет только первый элемент с этим идентификатором.

Если вы хотите иметь несколько элементов с идентификатором, то вместо этого вы класс:

<div class="directions"></div>

И затем обратитесь к классу в jQuery:

$(".directions").click(...);

Это получит все элементы с этим именем класса.


Если у вас также есть несколько карт, вам также нужно будет изменить это на класс и как вы найдете соответствующий объект карты, если объект объектов, на который был нажат, зависит от вашей структуры HTML. Вам нужно будет поделиться своим HTML, чтобы мы советовали о том, как это сделать. Обычно это связано с использованием $(this) для ссылки на кнопку, на которую была нажата кнопка, а затем .closest("some selector") чтобы перейти к родительской цепочке к общему родительскому .find(".map"), а затем .find(".map") чтобы найти объект карты, связанный с этой кнопкой, примерно так:

<div class="container">
    <div class="directions">Get Directions</div>
    <div class="map"></div>
</div>

$(document).ready(function() {
    $(".directions").click(function() {
        $(this).closest(".container").find(".map").slideToggle('fast');
    });
});

Но точный код будет зависеть от вашего HTML.

  • 0
    благодарю вас. Вы сделали $ (this) .closest (". Container") для производительности?
  • 0
    @AdamG - я сделал это для гибкости дизайна. Он найдет .map в том же контейнере, даже если макет HTML будет несколько изменен, что сделает код более устойчивым.
1

Поскольку id должен быть уникальным, вам нужно использовать класс для directions и map:

<div class="directions"><p>Get Directions</p></div>
<div class="map"> 

то вы можете использовать . для целевых элементов по классам:

$(document).ready(function(e) {
    $(".directions").click(function(e) {
        $(this).next().slideToggle('fast');
    });
});

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

Обновленный скрипт

Ещё вопросы

Сообщество Overcoder
Наверх
Меню