2
jQueryにいくつかの問題があり、ポートフォリオレイアウトから一部のコンテンツをフィルタリングしています。現在私はWordPressを使用しています。 jQueryのjqueryで同時リストをフィルタリングするときの問題
(function() {
jQuery.fn.filterable = function(settings) {
settings = jQuery.extend({
useHash: true,
animationSpeed: 1000,
easingShow: 'easeInCubic',
easingHide: 'easeOutCubic',
show: { width: 'show', marginRight: '20px', opacity: 'show' },
hide: { width: 'hide', marginRight: '0', opacity: 'hide' },
useTags: true,
tagSelector: '#portfolio-filter a',
selectedTagClass: 'current',
allTag: 'all'
}, settings);
return jQuery(this).each(function(){
/* FILTER: select a tag and filter */
jQuery(this).bind("filter", function(e, tagToShow){
if(settings.useTags){
jQuery(settings.tagSelector).removeClass(settings.selectedTagClass);
jQuery(settings.tagSelector + '[href=' + tagToShow + ']').addClass(settings.selectedTagClass);
}
jQuery(this).trigger("filterportfolio", [ tagToShow.substr(1) ]);
});
/* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */
jQuery(this).bind("filterportfolio", function(e, classToShow){
if(classToShow == settings.allTag){
jQuery(this).trigger("show");
}else{
jQuery(this).trigger("show", [ '.' + classToShow ] );
jQuery(this).trigger("hide", [ ':not(.' + classToShow + ')' ]);
}
if(settings.useHash){
location.hash = '#' + classToShow;
}
});
/* SHOW: show a single class*/
jQuery(this).bind("show", function(e, selectorToShow){
jQuery(this).children(selectorToShow).each(function() {
jQuery(this).animate(settings.show, settings.animationSpeed, settings.easingShow);
imagelink = jQuery(this).find('.entry-thumb a');
imagelink.attr('rel', imagelink.attr('rel').replace(/(\d)\]/, '$1_active]'));
});
});
/* SHOW: hide a single class*/
jQuery(this).bind("hide", function(e, selectorToHide){
jQuery(this).children(selectorToHide).each(function() {
jQuery(this).animate(settings.hide, settings.animationSpeed, settings.easingHide);
imagelink = jQuery(this).find('.entry-thumb a');
imagelink.attr('rel', imagelink.attr('rel').replace('_active', ''));
});
});
/* ============ Check URL Hash ====================*/
if(settings.useHash){
if(location.hash != '')
jQuery(this).trigger("filter", [ location.hash ]);
else
jQuery(this).trigger("filter", [ '#' + settings.allTag ]);
}
/* ============ Setup Tags ====================*/
if(settings.useTags){
jQuery(settings.tagSelector).click(function(){
jQuery('#portfolio-list').trigger("filter", [ jQuery(this).attr('href') ]);
jQuery(settings.tagSelector).removeClass('current');
jQuery(this).addClass('current');
});
}
});
}
})(jQuery);
jQuery(document).ready(function(){
jQuery('#portfolio-list').filterable();
});
をこれが永遠に行く
<div id="portfolio" class="index works">
<ul id="portfolio-filter" class="horiz-list">
<li><a ref="all" title="" href="#all" class="current">All</a></li>
<li><a ref="editorial" title="" href="#editorial" class="">Editorial</a></li>
<li><a ref="embalagem" title="" href="#embalagem">Embalagem</a></li>
<li><a ref="identidade-visual-coportativa" title="" href="#identidade-visual-coportativa">Identidade Visual Coportativa</a></li>
<li><a ref="marketing" title="" href="#marketing">Marketing</a></li>
<li><a ref="merchandising-e-pdv" title="" href="#merchandising-e-pdv">Merchandising e PDV</a></li>
<li><a ref="sinalizacao" title="" href="#sinalizacao">Sinalização</a></li>
</ul>
<div id="your_post_here_1" style="float: left;"></div>
<ul id="portfolio-list" class="horiz-list" linha="1">
<li class=" even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
<div class="entry-thumb standard" id="portfolio_thumb">
<a class="thumblink" href="javascript:void(0)" linha="1" postid="817" link="#" rel="prettyPhoto[1266_active]">
<img class="thumbnail" src="">
<span class="extra" style="display: none; "></span>
</a>
</div>
<div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
<a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
Projeto Verão
</a>
</div>
<a class="more-link" href="javascript:void(0)" linha="1" postid="817" style="bottom: -40px; "></a>
</li>
<li class=" odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
<div class="entry-thumb standard" id="portfolio_thumb">
<a class="thumblink" href="javascript:void(0)" linha="1" postid="851" link="#" rel="prettyPhoto[1266_active]">
<img class="thumbnail" src="#">
<span class="extra"></span>
</a>
</div>
<div class="entry-title" id="link">
<a href="javascript:void(0)" title="Fixate" rel="bookmark">
Fixate
</a>
</div>
<a class="more-link" href="javascript:void(0)" linha="1" postid="851"></a>
</li>
</ul>
<div id="your_post_here_2" style="float: left;"></div>
<ul id="portfolio-list" class="horiz-list" linha="2">
<li class=" even portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
<div class="entry-thumb standard" id="portfolio_thumb">
<a class="thumblink" href="javascript:void(0)" linha="2" postid="817" link="#" rel="prettyPhoto[1266_active]">
<img class="thumbnail" src="">
<span class="extra" style="display: none; "></span>
</a>
</div>
<div class="entry-title" id="link" style="visibility: visible; top: -124px; ">
<a href="javascript:void(0)" title="Projeto Verão" rel="bookmark">
Projeto Verão
</a>
</div>
<a class="more-link" href="javascript:void(0)" linha="2" postid="817" style="bottom: -40px; "></a>
</li>
<li class=" odd portfolio-entry marketing " style="margin-right: 20px; display: list-item; ">
<div class="entry-thumb standard" id="portfolio_thumb">
<a class="thumblink" href="javascript:void(0)" linha="2" postid="851" link="#" rel="prettyPhoto[1266_active]">
<img class="thumbnail" src="#">
<span class="extra"></span>
</a>
</div>
<div class="entry-title" id="link">
<a href="javascript:void(0)" title="Fixate" rel="bookmark">
Fixate
</a>
</div>
<a class="more-link" href="javascript:void(0)" linha="2" postid="851"></a>
</li>
</ul>
<div id="your_post_here_3" style="float: left;"></div>
</div>
...
をそして、ここで私はその唯一のフィルタをアクティブにしたときので、私の問題はされています。それが開いた後にここに私のページです最初の行で起こって、私はおそらく私がページを設定していた間違いをしていたが、それは働いていた奇妙なこれ！私はそれを元に戻そうとしましたが、まだノーティフィケーションが起こります...誰かがアドバイスを持っていれば、感謝します！
私が欲しいものを上回ることは、一部のリストを持つdivを使用してフィルタリングすることです。このような 何か：
<div>
<ul id="portfolio">
<li class="booking"></li>
<li class="code"></li>
<li class="hash"></li>
</ul>
<ul id="portfolio">
<li class="booking"></li>
<li class="marketing"></li>
<li class="booking"></li>
</ul>
</div>
起動し、選択したクラス ではない人を隠す例えば予約の選択：
<div>
<ul id="portfolio">
<li class="booking"></li>
</ul>
<ul id="portfolio">
<li class="booking"></li>
<li class="booking"></li>
</ul>
</div>
が正確に削除するが、それらの上に表示なしを入れません。
を入力してください。目標と目標が何であるかを知ることは難しいです。 –
申し訳ありませんが、私は投稿を編集しました、私はそれが助けてくれることを願っています。 –