Question

我有一个菜单列表，可以引用不同的项目。

每个列表项共享其＆＃34; ID＆＃34;在一个画廊展示了一个项目。

<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>

非常感谢

Answer 1

正如评论所说，ID必须是唯一的，并且您缺少报价。您可以使用数据属性来处理逻辑或ID和数据属性的组合。

尝试这样的事情：

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事件附加到带有类.menu的元素中的每个li项。在click事件中，我们从clicked元素中提取data-project-id属性，从gallery中找到项目elemenet并显示它。

JSFiddle Demo

Answer 2

您也可以使用普通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();
});

具有相同ID元素的触发事件

2 个答案: