我在做一个可过滤的旋转木马,需要一些帮助。
这是分类。
<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.)当单击时,数据id将被捕获。)所有没有单击元素的"data_cats“的帖子都是隐藏的。
我在想:
1.)我使用的是$(这个).click,然后是2)。我不知道如何获取那个ID,我用过吗?之后,我想使用.find ()和.not(“在2中捕获的cat id”)4)。隐藏这些元素
我理解这个概念,只是不知道如何把它放在一起。
发布于 2015-12-14 17:33:08
$(document).ready(function(){
$('.dslc-post-filter').click(function(){
var id = $(this).attr('data-id');
//HIDE ALL DESIRED ELEMENTS
});
});
假设它位于自己的.js
文件中,否则将其放入脚本标记中。
发布于 2015-12-14 17:32:31
免责声明我没有看过所有的代码。但是,要回答您的问题,“如何获得单击元素的id?”在元素上放置一个类并将事件侦听器添加到该类中,然后在回调函数中获取元素id。
<div class='filter' id='foo'></div>
<script>
$('.filter').on('click', function(e){
console.log($(this).attr('id'));
});
</script>
我的jQuery技能很差,所以代码可能需要修改一两次,但这是基本的想法。
发布于 2015-12-14 18:10:41
试试这个:
$('.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.
}
});
示例:http://jsfiddle.net/cjb95996/3/
https://stackoverflow.com/questions/34273088
复制相似问题