具有相同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元素的触发事件

回答

相关问题