문제
나는 이것을 완료했다 지도 시간 NetTuts+에서 jQuery를 사용하여 "필터링 가능한"포트폴리오를 만들고 약간의 트위를 원했습니다.
클릭 한 내용을 기반으로 상단 탐색 및 각 카테고리 필터를 클릭하는 대신 하나의 '디자인'을 클릭하고 다른 'CMS'를 클릭하면 두 카테고리의 항목을 표시합니다. 다시 클릭하면 해당 필터를 끄고 선택한 내용을 표시합니다.
다시 말해서, 나는 내가 선택한 것을 표시하고 카테고리를 다시 클릭하여 선택하지 않기를 원합니다.
아래는 내가 사용하는 JS 파일입니다.
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
이것에 대한 도움은 좋을 것입니다. 감사.
해결책
토글링 요소 배열을 유지하십시오. 나는 이것을 테스트 할 수 없지만 가까이서 생각합니다.
편집하다: 이제 테스트하고 작동합니다.
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).toggleClass('toggled_filter').parent().toggleClass('current'); // toggle a class for its state
$(this).css('outline','none');
var filterValList = [];
$('.toggled_filter').each(function(){
// add each text item to the list
filterValList.push($(this).text().toLowerCase().replace(' ','-'));
});
if($.inArray('all', filterValList) != -1 || filterValList.length === 0) {
$('ul#filter li:first').addClass('current');
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#filter li:first').removeClass('current');
$('ul#portfolio li').each(function() {
var classes = $(this).attr('class').split(/\s+/);
// go through each of the classes on each element
// and hide them if they aren't toggled on
var match_found = false;
for(var i in classes){
if($.inArray(classes[i], filterValList) != -1) {
match_found = true;
}
}
// check and see if anything matched
if(!match_found){
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
제휴하지 않습니다 StackOverflow