首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jQuery : not ()选择器不能在addClass()之后的元素上工作(实时/实时)

jQuery : not ()选择器不能在addClass()之后的元素上工作(实时/实时)
EN

Stack Overflow用户
提问于 2013-01-18 00:10:42
回答 1查看 1.2K关注 0票数 3

我在使用:not()选择器/excluder时遇到了问题。我正在做的是添加一个'.Activated‘类到打开的折叠面板(使用类’.panel‘)。然后,当使用'.panel‘类悬停所有元素时,我想运行一个函数。然而,有时会有两个类都有‘class=’面板激活的元素,我不想在这些元素上运行函数。

下面是我的一些相关代码:

代码语言:javascript
运行
复制
function onOpenPanel(obj){
        var slideR = obj.index + 1;
        $('.panel:nth-child(' + slideR + ')').addClass('Activated');
    } 

$('.panel:not(.Activated)').hover(function(){
        $(this).css('background-position','0px top');
    },function(){
        $(this).css('background-position','-41px top');
    });

你会在网站上注意到,在打开的折叠面板上,背景跳跃了41px,因为my :not()选择器没有发现面板也有'.Activated‘类,因此不应该受到.hover函数的影响。

HTML:

代码语言:javascript
运行
复制
<div class="accordion">

    <!-- First slide -->

    <div>
        <img src="img/img-1.jpg" width="10" />

        <div class="caption">
        <p class="mask-1"></p>
            <p class="title sl1">
                Professional Products & Solutions
            </p>
            <p class="body one">As a global leader across many sectors, Sony Professional combine world class knowledge with groundbreaking technology – inspiring businesses to amaze their customers.<br />
            </p>

        </div>

    </div>

    <!-- First slide -->

    <!-- Second slide -->

    <div>
        <img src="img/img-2-1.jpg" />

        <div class="caption">
        <p class="mask-2"></p>
            <p class="title sl2">
                4K Digital Cinema
            </p>
            <p class="body two">Taking digital cinema to new levels of immersive engagement, the superior resolution of Sony 4K creates the ultimate in crowd-pleasing experiences – partner with us for business growth.
            </p>

            <a href="http://stg.sony.co.uk/pro/hub/digital-cinema" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Second slide -->

    <!-- Third slide -->

    <div class="sonySlideIn">
        <img src="img/img-3.jpg" />

        <div class="caption">
        <p class="mask-3"></p>
            <p class="title sl3">
                Broadcast & Pro AV
            </p>
            <p class="body three">Shoot, edit, broadcast, archive. Whatever your priority – from image quality to production efficiency – Sony enables you realise your vision without compromises.
            </p>
            <img src="img/prod-3.jpg" width="400" height="98" id="prod-3"/>
            <a href="http://stg.sony.co.uk/pro/hub/broadcast-professional-audio-video" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Third slide -->

    <!-- Fourth slide -->

    <div class="sonySlideIn">
        <img src="img/img-4.jpg" />

        <div class="caption">
        <p class="mask-4"></p>
            <p class="title sl4">
                Industrial Cameras
            </p>
            <p class="body four">From machine vision to visual communications and OEM conference solutions, see how the application of Sony imaging expertise delivers market-leading solutions for industrial environments.
            </p>
            <img src="img/prod-4.jpg" id="prod-4"/>
            <a href="http://stg.sony.co.uk/pro/hub/industrial-machine-vision-cameras" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Fourth slide -->

    <!-- Fifth slide -->

    <div class="sonySlideIn">
        <img src="img/img-5.jpg" />

        <div class="caption">
        <p class="mask-5"></p>
            <p class="title sl5">
                Medical
            </p>
            <p class="body five">Driving the future of medical imaging by redefining clarity across monitors, cameras, radiology imagers, printers and recorders, Sony Medical creates pioneering solutions – including 3D – that enable clearer diagnoses and more efficient workflows.
            </p>
            <img src="img/prod-5.jpg" id="prod-5"/>
            <a href="http://stg.sony.co.uk/pro/hub/medical" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Fifth slide -->

    <!-- Sixth slide -->

    <div class="sonySlideIn">
        <img src="img/img-6.jpg" />

        <div class="caption">
        <p class="mask-6"></p>
            <p class="title sl6">
                Projectors, Displays & Digital Signage
            </p>
            <p class="body six">Designed to attract attention, engage interest and add the wow factor to professional environments, Sony bring superior image quality to businesses, organisations, education establishments and venues of every size. 
            </p>
            <img src="img/prod-6.jpg" id="prod-6"/>
            <a href="http://stg.sony.co.uk/pro/hub/displays-projectors-digital-signage" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Sixth slide -->

    <!-- Seventh slide -->

    <div class="sonySlideIn">
        <img src="img/img-7.jpg" />

        <div class="caption">
        <p class="mask-7"></p>
            <p class="title sl7">
                Sports & Stadiums
            </p>
            <p class="body seven">Maximising customer engagement and satisfaction, our range of leading AV solutions for large arenas drives footfall, spend, loyalty and advocacy – see the advantages of partnering with Sony.
            </p>
            <a href="http://stg.sony.co.uk/pro/hub/solutions-stadiums-arenas" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Seventh slide -->

    <!-- Eigth slide -->

    <div class="sonySlideIn">
        <img src="img/img-8.jpg" />

        <div class="caption">
        <p class="mask-8"></p>
            <p class="title sl8">
                Video Security
            </p>
            <p class="body eight">See the most technically advanced, network based, end-to-end video security solutions – from hybrid and Full HD IP cameras to recorders and third-party compatible software.
            </p>
            <img src="img/prod-8.jpg" id="prod-8"/>
            <a href="http://stg.sony.co.uk/pro/hub/video-security" class="slide-link">Read more<img src="img/cta-block.jpg" class="cta-block"/></a>
        </div>

    </div>

    <!-- Eigth slide -->

</div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-01-18 00:16:57

当代码以方式执行时,jQuery选择器返回与匹配的元素,因此在这种情况发生后,它们不会反映出后来对DOM所做的更改。

您的代码将把hover事件处理程序绑定到执行代码时没有Activated类的元素(假设是在准备好DOM时),但是添加该类不会删除这些事件处理程序。

如果你想让他们做出动态反应,可以看看event delegation

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

https://stackoverflow.com/questions/14383291

复制
相关文章

相似问题

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