jQuery的只是重複的元素

這裏上運行一次：http://jsfiddle.net/gorelegacy/bn6Z2/jQuery的只是重複的元素

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

這是我在上面使用的代碼。

我在「獲取路線」文本上有一個簡單的滑動滑塊。但它只適用於數字1.然後它不適用於第二和第三個「獲取路線」

來源

2014-05-05 Adam G

你實現價值的ID必須在文件中是唯一的？你只能有一個具有給定ID的元素。當你引用一個像'$（「＃directions」）'這樣的id時，那隻會找到帶有這個id的第一個。如果你想有多個，可以使用'class =「directions」'，然後使用'$（「。directions」）'。 – jfriend00

如果我意識到我不會在這裏張貼。你有沒有解決方案 –

你不必麻煩。我只是在評估你的知識水平。請閱讀我上面評論中的其他內容。 – jfriend00

將我的評論更改爲答案。

您只能在具有給定ID的文檔中使用一個元素，因此$("#directions")只能找到具有該ID的第一個項目。

如果你想有一個標識多個項目，那麼你的一類，而不是：

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

而且，當時指的是jQuery的類：

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

這將讓所有具有該類名稱的元素。

如果你也有一個以上的地圖，那麼你將不得不也改變一類，你是怎麼找到因爲被點擊的方向對象的相應地圖對象取決於你的HTML結構。你需要分享你的HTML給我們建議最好的方法來做到這一點。通常，它涉及到使用$(this)引用被點擊，然後一個.closest("some selector")父鏈上去共同的父按鈕，然後.find(".map")找到這樣與該按鈕關聯的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。

來源

2014-05-05 03:01:30 jfriend00

謝謝。你是否完成了$（this）.closest（「。container」）的性能？ –

@AdamG - 我已經完成了設計的靈活性。即使HTML佈局有所改變，它也會在同一個容器中找到'.map'，這使得代碼更加健壯。 – jfriend00

由於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，以使其作爲預計工作d。

Updated Fiddle

來源

2014-05-05 03:01:49 Felix

jQuery的只是重複的元素

回答

相關問題