首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >单击元素的Id。

单击元素的Id。
EN

Stack Overflow用户
提问于 2015-12-14 17:28:00
回答 3查看 75关注 0票数 0

我在做一个可过滤的旋转木马,需要一些帮助。

这是分类。

代码语言:javascript
运行
复制
<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>

以下是被过滤的元素。

代码语言:javascript
运行
复制
<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)。隐藏这些元素

我理解这个概念,只是不知道如何把它放在一起。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-12-14 17:33:08

代码语言:javascript
运行
复制
$(document).ready(function(){
    $('.dslc-post-filter').click(function(){
        var id = $(this).attr('data-id');
        //HIDE ALL DESIRED ELEMENTS
    });
});

假设它位于自己的.js文件中,否则将其放入脚本标记中。

票数 0
EN

Stack Overflow用户

发布于 2015-12-14 17:32:31

免责声明我没有看过所有的代码。但是,要回答您的问题,“如何获得单击元素的id?”在元素上放置一个类并将事件侦听器添加到该类中,然后在回调函数中获取元素id。

代码语言:javascript
运行
复制
<div class='filter' id='foo'></div>
<script>
$('.filter').on('click', function(e){
  console.log($(this).attr('id'));
});
</script>

我的jQuery技能很差,所以代码可能需要修改一两次,但这是基本的想法。

票数 1
EN

Stack Overflow用户

发布于 2015-12-14 18:10:41

试试这个:

代码语言:javascript
运行
复制
$('.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/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34273088

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档