здесь: http://jsfiddle.net/gorelegacy/bn6Z2/
$(document).ready(function(e) {
$("#directions").click(function(e) {
$("#map").slideToggle('fast');
});
});
Это код, над которым я работаю выше.
У меня есть простой slidetoggle в тексте "получить направления". Но он работает только на номер 1. Затем он не работает для 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.
.map
в том же контейнере, даже если макет HTML будет несколько изменен, что сделает код более устойчивым.
Поскольку 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
чтобы они работали, как ожидалось.
$("#directions")
, он только когда-либо найдет первый с таким идентификатором. Используйтеclass="directions"
и затем$(".directions")
если вы хотите иметь более одного.