以下是类别。
<div class="dslc-post-filters">
<span class="dslc-post-filter dslc-inactive" data-id=" ">All</span>
<span class="dslc-post-filter dslc-inactive" data-id="the-nurturer">The Nurturer</span> <span class="dslc-post-filter dslc-inactive" data-id="the-builder">The builder</span> <span class="dslc-post-filter dslc-inactive" data-id="unifier">Unifier</span> <span class="dslc-post-filter dslc-active" data-id="explorer">Explorer</span> <span class="dslc-post-filter dslc-inactive" data-id="the-creator">The Creator</span></div>
以下是过滤后的元素。
<div class="dslc-posts dslc-partners dslc-clearfix dslc-posts-orientation-vertical dslc-init-grid "><div class="dslc-posts-inner">
<div class="dslc-post dslc-partner dslc-col dslc-3-col dslc-first-col" data-cats="the-nurturer " style="opacity: mysite;">
<div class="dslc-post-thumb dslc-partner-thumb dslca-post-thumb dslc-on-hover-anim">
<a href="mysitegiving/partner-view/test-6/"><img width="400" height="400" src="http://mysite.colostate.edu/giving/media/sites/86/2015/12/temp.png" class="attachment-full wp-post-image" alt="temp"></a>
</div><!-- .dslc-partner-thumb -->
<div class="dslc-post-main dslc-partner-main">
<div class="dslc-partner-title">
<h2><a href="http://mysite.colostate.edu/giving/partner-view/test-6/">The Nurturer</a></h2>
</div><!-- .dslc-partner-title -->
<div class="dslc-partner-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus tellus non dolor convallis imperdiet.… </div><!-- .dslc-partner-excerpt -->
</div><!-- .dslc-partner-main -->
</div><!-- .dslc-partner -->
<div class="dslc-post dslc-partner dslc-col dslc-3-col " data-cats="the-builder " style="opacity: mysite;">
<div class="dslc-post-thumb dslc-partner-thumb dslca-post-thumb dslc-on-hover-anim">
<a href="http://mysite.colostate.edu/giving/partner-view/test-5/"><img width="400" height="400" src="http://mysite.colostate.edu/giving/media/sites/86/2015/12/temp.png" class="attachment-full wp-post-image" alt="temp"></a>
</div><!-- .dslc-partner-thumb -->
<div class="dslc-post-main dslc-partner-main">
<div class="dslc-partner-title">
<h2><a href="http://mysite.colostate.edu/giving/partner-view/test-5/">The Builder</a></h2>
</div><!-- .dslc-partner-title -->
<div class="dslc-partner-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus tellus non dolor convallis imperdiet.… </div><!-- .dslc-partner-excerpt -->
</div><!-- .dslc-partner-main -->
</div><!-- .dslc-partner -->
<div class="dslc-post dslc-partner dslc-col dslc-3-col " data-cats="unifier " style="opacity: mysite;">
<div class="dslc-post-thumb dslc-partner-thumb dslca-post-thumb dslc-on-hover-anim">
<a href="http://mysite.colostate.edu/giving/partner-view/test-4/"><img width="400" height="400" src="http://mysite.colostate.edu/giving/media/sites/86/2015/12/temp.png" class="attachment-full wp-post-image" alt="temp"></a>
</div><!-- .dslc-partner-thumb -->
<div class="dslc-post-main dslc-partner-main">
<div class="dslc-partner-title">
<h2><a href="http://mysite.colostate.edu/giving/partner-view/test-4/">Unifier</a></h2>
</div><!-- .dslc-partner-title -->
<div class="dslc-partner-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus tellus non dolor convallis imperdiet.… </div><!-- .dslc-partner-excerpt -->
</div><!-- .dslc-partner-main -->
</div><!-- .dslc-partner -->
<div class="dslc-post dslc-partner dslc-col dslc-3-col dslc-last-col" data-cats="explorer " style="opacity: 1;">
<div class="dslc-post-thumb dslc-partner-thumb dslca-post-thumb dslc-on-hover-anim">
<a href="http://mysite.colostate.edu/giving/partner-view/tes-3/"><img width="400" height="400" src="http://mysite.colostate.edu/giving/media/sites/86/2015/12/temp.png" class="attachment-full wp-post-image" alt="temp"></a>
</div><!-- .dslc-partner-thumb -->
<div class="dslc-post-main dslc-partner-main">
<div class="dslc-partner-title">
<h2><a href="http://mysite.colostate.edu/giving/partner-view/tes-3/">Explorer</a></h2>
</div><!-- .dslc-partner-title -->
<div class="dslc-partner-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus tellus non dolor convallis imperdiet.… </div><!-- .dslc-partner-excerpt -->
</div><!-- .dslc-partner-main -->
</div><!-- .dslc-partner -->
<div class="dslc-post dslc-partner dslc-col dslc-3-col dslc-first-col" data-cats="the-creator " style="opacity: mysite;">
<div class="dslc-post-thumb dslc-partner-thumb dslca-post-thumb dslc-on-hover-anim">
<a href="http://mysite.colostate.edu/giving/partner-view/test-2/"><img width="400" height="400" src="http://mysite.colostate.edu/giving/media/sites/86/2015/12/temp.png" class="attachment-full wp-post-image" alt="temp"></a>
</div><!-- .dslc-partner-thumb -->
<div class="dslc-post-main dslc-partner-main">
<div class="dslc-partner-title">
<h2><a href="mysite/giving/partner-view/test-2/">The Creator</a></h2>
</div><!-- .dslc-partner-title -->
<div class="dslc-partner-excerpt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lectus a arcu pretium lobortis… </div><!-- .dslc-partner-excerpt -->
</div><!-- .dslc-partner-main -->
</div><!-- .dslc-partner -->
</div><!-- .dslc-posts-inner -->
</div>
基本上我想要完成的是这个。
1。）单击dslc-post-filter时，将捕获数据ID 2.）隐藏所有没有clicked元素“data_cats”的帖子。
我在想：
1。）我正在使用$（this）.click然后 2.）我不知道如何捕获该ID，我是否使用？ 3.）之后我想我会使用.find（）和.not（“cat id in captured in 2”） 4.）隐藏这些元素
我理解这个概念，只是不确定如何把它放在一起。
答案 0 :(得分：1)
免责声明我没有阅读所有代码。但要回答你的问题＆＃34;如何获取被点击元素的ID？＆＃34;在元素上放一个类并将事件监听器添加到该类，然后在回调函数中获取元素id
<div class='filter' id='foo'></div>
<script>
$('.filter').on('click', function(e){
console.log($(this).attr('id'));
});
</script>
我的jQuery技能低于标准，因此代码可能需要一两个调整但是这个基本想法。
答案 1 :(得分：1)
Try this :
$('.dslc-post-filter').on("click",function() // delegate a click event to the elements with class 'dslc-post-filter'
{
var selector = $(this).data("id"); // extract the data attr id
if($.trim(selector) === "") // if it's empty , show all the sections
$('.dslc-partner').show();
else
{
$('.dslc-partner').hide(); // if not , hide all the sections
$('.dslc-partner[data-cats=' + selector + ']').show(); // locate the element with class 'dslc-partner' and data-cats attribute equal to the data attr id of the element clicked and show it.
}
});
Example : http://jsfiddle.net/cjb95996/3/
答案 2 :(得分：0)
$(document).ready(function(){
$('.dslc-post-filter').click(function(){
var id = $(this).attr('data-id');
//HIDE ALL DESIRED ELEMENTS
});
});
假设它在自己的.js文件中，否则将其放在脚本标记中。