2010-08-07 4 views
0

jQuery와 여러 클래스를 사용하여 필터링 가능한 사진 갤러리를 만들려고합니다. 몇 가지 코드를 설정했지만 작동하지 않는 것 같습니다. 아무도 나 에게이 기능을 해결하는 방법에 대한 통찰력을 줄 수 있습니까?jQuery를 사용하여 콘텐츠 필터링

$(document).ready(function(){ 
     $('#sorter a').click(function(e){ 
     var sortName = $(this).text().toLowerCase().replace(' ','-'); 
     if(sortName === 'all-images'){ 
     $('#photorow1 li').show().removeClass('hidden'); 
      } 
     else { 
    $('#photorow1 li').filter(sortName).show().removeClass('hidden') 
       .end().not(sortName).hide().addClass('hidden'); 
     } 
e.preventDefault(); 
}); 
}); 

어떤 도움을 주시면 감사하겠습니다.

* 업데이트 된 코드

문제는 어떤 작업이 진행되고 전에 return false을하고, 당신이 조금 그것을 청소 할 수 클릭 핸들러 : 전체

의 끝이 이동하고있다

답변

1

이 같은 일이 수행해야합니다

$(function(){ 
    $('#sorter a').click(function(e){ 
    var sortName = $(this).text().toLowerCase().replace(' ','-'); 
    if(sortName === 'all-images') { 
     $('#photorow1 li').show(); 
    } else { 
     $('#photorow1 li').filter(filterVal).show().removeClass('hidden') 
        .end().not(filterVal).hide().addClass('hidden'); 
    } 
    e.preventDefault(); 
    }); 
}); 

내가 (당신이 뭔가 다른 클래스를 필요로하는 경우) 그냥 .hidden CSS 규칙에 display: none;를 추가하는 것이 좋습니다, 그렇지 않으면 단지 .hide()/.show()가 작동합니다.

+0

이것은 작동하지만 모든 요소를 ​​숨기고 어떤 식 으로든 sortName ...을 사용하여 지정하려고 시도한 클래스 이름으로 요소를 간과하고 있습니다. –

0

return false;은 해당 함수의 뒤에 오는 코드가 무시되므로 함수의 끝에 있어야합니다.

플러스, 당신은 동일한 기능에 e.preventDefault();e.preventDefault(); 필요하지 않습니다, 그들은 약간 겹칩니다. 유사점에 대한 자세한 내용은 here을 참조하십시오. 하나를 선택.

+0

마지막 문장에주의하십시오. * 같은 것을하지 않습니다 *, 귀하의 링크 된 답변이 정확하게 두 단어를 구별합니다. –

+0

예, 그 문장은 더 잘 표현되었을 수 있습니다. – cnanney

관련 문제