Question

此处：http://jsfiddle.net/gorelegacy/bn6Z2/

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

这是我上面使用的代码。

我在“获取路线”上有一个简单的幻灯片。文本。但它仅适用于1号。然后它不适用于第2和第3个获取方向＆＃39;

Answer 1

将我的评论改为答案。

您只能在具有给定ID的文档中使用一个元素，因此$("#directions")只能找到具有该ID的第一个项目。

如果你想拥有一个带有标识符的多个项目，那么你就是一个类：

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

然后，参考jQuery中的类：

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

这将获得具有该类名的所有元素。

如果您还有多个地图，那么您还必须将其更改为一个类，以及如何根据您点击的方向对象找到合适的地图对象取决于您的HTML结构。您需要与我们分享您的HTML，以便就最佳方式提供建议。通常，它涉及使用$(this)引用单击的按钮，然后使用.closest("some selector")将父链上升到公共父级，然后使用.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。

Answer 2

由于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');
    });
});

请注意，您还需要使用.而不是# directions和map来更改CSS，以使其按预期工作。

<强> Updated Fiddle

Jquery只在重复元素上运行一次

2 个答案: