여러 div에 영향을 미치는 jQuery 클릭 함수

jQuery의 클릭 기능을 사용하여 JavaScript에서 div를 구분하지 않고 선택된 div에 마우스 오버 상태를 적용하려고합니다. 내가 현재 사용하고 있습니다여러 div에 영향을 미치는 jQuery 클릭 함수

$(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 데이터 특성을 사용해야 함) 알고 있지만 불필요하게 붙어 있습니다. 나는 완전한 뉴비와 같이 지금 당장 느끼지 만, 나는이 간단한 것을 할 수 없다. (비록 내가 더 진보 된 것들을했지만).

출처

2013-03-13 jdaio

을 당신은 모두 추가하고 그런데, 귀하의 예제 코드 (.hovered) 같은 클래스를 제거하고 있습니다. – isherwood

jQuery의 유연성 (좋은 프로그래밍 습관)을 활용하고 이에 따라 범위를 줄이면됩니다. 이미 변수 정의와 비슷한 것을하고 있습니다. 예를 들어, 클릭 것 .project의 인스턴스 내부 만 a.expand 요소를 대상으로 :

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

출처

2013-03-13 19:02:23 isherwood

네가 맞아! 클래스를 추가하는 작업에 $ (this)를 적용하고 (.removeClass를 그대로 유지) 모든 것이 효과적입니다! 나는 그것이 작은 무엇인가 알고 있었다. 그러나 나는 단지 이것을 생각할 수 없었다! 감사! – jdaio

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

출처

2013-03-13 19:09:27 pussmun

코드가 제대로 작동하지 않았습니다! 그것은 각각 개별적으로 적용되었지만, isherwood의 예에 따르면 클릭을 비활성화하고 탭을 손상시키지 않는 더 깨끗한 방법이 제공되었습니다. – jdaio

여러 div에 영향을 미치는 jQuery 클릭 함수

답변

관련 문제