javascript - 影响多个 div 的 jQuery 单击函数

Question

我正在尝试使用 jQuery 的点击功能将悬停状态应用到选定的 div，而不区分 JavaScript 中的 div。我目前正在使用:

 $(document).ready(function(){
    $(".project").click(function() {
            $("a.expand").removeClass("hovered");
            $("a.expand").addClass("hovered");
            $(".project_full").hide();
            var selected_tab = $(this).find("a").attr("href");
            $(selected_tab).fadeIn();
            return false;
        });

使用 HTML:

<div class="project first project_gizmoscoop">
  <div class="title">
     GizmoScoop!                    
     <div class="date">2012</div>
  </div>
  <a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
  <div class="title">
     Striking Code                  
     <div class="date">2011</div>
  </div>
  <a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>

.hovered 类应用于单击的链接(来自外部 CSS 文件的特定样式)。然而，一切都在被选择。 (有关示例，请参见 http://www.codeisdna.com)。

我知道我做错了什么(我应该指定个人 ID 或使用 HTML5 数据属性)，但我不必要地卡住了。我现在感觉自己完全是个新手，我做不到这么简单的事情(尽管我做过更高级的事情)。

Answer 1

您只需利用 jQuery 的灵 active (和良好的编程习惯)并相应地缩小您的范围。您已经对变量定义做了类似的事情。例如，仅针对被单击的 .project 实例中的那些 a.expand 元素:

$(".project").click(function() {
    $(this).find("a.expand").removeClass("hovered");
    ...
});