if-statement에서 href-class와 div-class를 일치 시키십시오.

Question

이 글에 도움이되고 싶습니다. 포트폴리오 아이템 용 필터 박스를 만들고 있습니다.

나는 텍스트와 같은 하나의 클래스 이름을 가진 네 개의 링크가 있습니다. 모든 포트폴리오 항목이 나열되어 있습니다. 각 포트폴리오 항목은 .listItem과 링크 클래스 중 하나 인 두 개의 클래스가있는 div에 있습니다.

예 : <a class="Architecture" href="#">

난 클릭에 애니메이션을 적용 할 DIV는 다음과 같습니다 <div class="listItem Architecture">

이 내 스크립트이고 키우면가 작동하지 ...

$(document).ready(function(){ 

    var filterTrig = $('#sortPort a').attr('class'); 

    $('#sortPort a').click(function() { 
     $('.listItem').each(function(){ 
      if ($(this).is(filterTrig)){ 
       $(this).hide(); 
      } 
     }); 

     return false; 
    }); 
}); 

Answer 1

is() 소요 선택기. 당신은 클래스 이름과 함께 최선을 다하고 있습니다, 그래서 당신은 대신 hasClass()를 사용할 수 있습니다

$(document).ready(function() { 
    $("#sortPort a").click(function() { 
     var filterTrig = $(this).attr("class"); 
     $(".listItem").each(function() { 
      if ($(this).hasClass(filterTrig)) { 
       $(this).hide(); 
      } 
     }); 
    }); 
}); 

또한, 마침표 (.)와 클래스 이름 앞에 수있는 수준의 선택으로 바꿀하기 위해,하지만 앵커 요소가 여러 클래스를 노출하는 경우 작동하지 않습니다.

Answer 2

감사합니다. 나는 코드로 더 많은 일을했고 다른 해결책을 찾았다. 그것은 아마도 거대하고 추악한 것으로 써졌지만, 현재 스크립트는 작동합니다.

var listItem = $('.listItem') 
     var sp = 'currentSortPort' 
     $('#sortPort a.filter').bind(
      'click' , function(a) { 
       var trigger = $(this).html(); 
       var portType = '.listItem'+'.'+trigger; 
        $('h3').removeClass(sp); 
        $(a.target).parent().addClass(sp); 

       $(listItem).each(function() { 
        $(this).fadeTo('fast', 1); 
        $(portType).addClass('selected'); 
        $(this).not('.selected').fadeTo('medium', 0.1); 
       }); 
       $('.listItem').removeClass('selected');    
     return false; 
    }); 
    $('a.reset').click(function(b){ 
      $('h3').removeClass(sp); 
      $(b.target).parent().addClass(sp); 
      $(listItem).fadeTo('fast', 1); 
      return false; 
    }); 

감사를 다시 : 그 같은이 (1979design.se/portfolio 라이브를 참조) 모든 효과를 포함

! 너는 맞다, jQuery는 불가능하지 않다;) 초보자가 할 때 거대한 대본 만.