1

JavaScriptでdivを区別せずに、jQueryのクリック機能を使用して、選択した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 データ属性を使用する必要があります) が、不必要に立ち往生しています。私は今、完全な初心者のように感じます。これほど単純なことはできません (より高度なことはできましたが)。

4

2 に答える 2

2

jQueryの柔軟性（および優れたプログラミング手法）を利用し、それに応じてスコープを縮小する必要があります。あなたはすでに変数定義と同じようなことをしています。たとえば、クリックさa.expandれたインスタンス内の要素のみをターゲットにするには、次のようにします。.project

$(".project").click(function() {
    $(this).find("a.expand").removeClass("hovered");
    ...
});
于 2013-03-13T19:02:23.087 に答える
0 
$(".expand").click(function() {
        $(this).addClass("hovered");
        ..
    });
于 2013-03-13T19:09:27.067 に答える