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

Question

我有一个指向不同项目的菜单列表。

每个列表项都与画廊中展示的项目共享其“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>

非常感谢

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 项目。在点击事件中，我们从被点击的元素中提取 data-project-id 属性，从图库中找到项目元素并显示它。

JSFiddle Demo