Question

我正在尝试使用jQuery的click函数将悬停状态应用于选定的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的灵活性（以及良好的编程习惯）并相应地缩小范围。您已经在使用变量定义执行类似操作。例如，要仅定位点击的a.expand实例中的.project个元素：

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

Answer 2

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

jQuery单击函数影响多个div

2 个答案: