影响多个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 的灵活性（和良好的编程习惯）并相应地缩小您的范围。您已经对变量定义进行了类似的操作。例如，仅定位.project 实例中被点击的a.expand 元素：

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

Answer 2

$(".expand").click(function() {
        $(this).addClass("hovered");
        ..
    });