具有相同ID元素的觸發事件

每個列表項都與一個展示在畫廊中的項目共享其「ID」。

<div class="menu"> 
<ul> 
    <li id="id1">project 1</li> 
</ul> 
</div> 

<div class="gallery"> 
    <div class="proc id="id1">project 1</div> 
</div>

我想一個jQuery功能：

當點擊從菜單列表項，獲得該項目具有相同的ID做一些事情。

我真的不知道從哪裏開始，我被困在那個：

<script> 
$("li#id1").click(function() { 
    $(".project#id1").show(); 
}); 
</script>

非常感謝

來源

2014-06-18 cfocket

相同的ID元件??? ID應該是唯一的。 –

^你在'class =「proc id =」id1「' – j08691

中缺少了一段引用，然後使用'data（'。project [data-id = 「id1」]'）' – putvande

正如評論所說的ID必須是唯一的，你丟失了一些報價。您可以使用數據屬性來處理您的邏輯或ids和數據屬性的組合。

嘗試這樣：

HTML

<div class="menu"> 
<ul> 
    <li data-project-id="first-project-id">project 1</li> 
    ... 
</ul> 
</div> 

<div class="gallery"> 
    <div class="proc" data-project-id="first-project-id">project 1</div> 
</div>

的JavaScript

$('.menu li').click(function(){ 
    var targetId = $(this).attr('data-project-id'); 
    $('.proc[data-project-id="' + targetId + '"]').show(); 
});

click事件附加到每個項目裏與類。菜單的元素。在點擊事件中，我們從單擊的元素中提取data-project-id屬性，從庫中找到項目elemenet並顯示它。

JSFiddle Demo

來源

2014-06-18 13:59:01

工作很好，非常感謝。但是，需要挖掘這個attr的東西， – cfocket

在這種情況下，你也可以使用$（this）.data（「project-id」）;而不是attr。或者工作正常，只是指出它的完整性 – kasdega

數據屬性允許你定義自己的屬性，這些屬性也是有效的HTML5屬性，只要你覺得它們有用，就可以使用它們。屬性：http://html5doctor.com/html5-custom-data-attributes/ –

可以使用正常的id也（如選擇器）

HTML

<div class="menu"> 
<ul> 
<li id="first-project-id">project 1</li> 
... 
</ul> 
</div> 

<div class="gallery"> 
<div class="proc" id="first-project-id">project 1</div> 
</div>

jQuery的

$('.menu li').click(function(){ 
var targetId = $(this).attr('id'); 
$('.proc[id="' + targetId + '"]').toggle(); 
});

來源

2017-06-17 13:48:41

具有相同ID元素的觸發事件

回答

相關問題