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

jQuery:not()选择器在addClass()之后的元素上不工作(实时/实时),jquery,selector,jquery-hover,Jquery,Selector,Jquery Hover,我在使用:not()选择器/排除器时遇到问题。我正在做的是将一个“.Activated”类添加到打开的手风琴面板(使用类“.panel”)。然后,当使用“.panel”类悬停所有元素时,我想运行一个函数。但是,有时会有两个类都是“class=”panel Activated“”的元素,我不想在这些元素上运行函数 下面是我的一些相关代码: function onOpenPanel(obj){ var slideR = obj.index + 1; $('.panel

我在使用:not()选择器/排除器时遇到问题。我正在做的是将一个“.Activated”类添加到打开的手风琴面板(使用类“.panel”)。然后,当使用“.panel”类悬停所有元素时,我想运行一个函数。但是,有时会有两个类都是“class=”panel Activated“”的元素,我不想在这些元素上运行函数

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

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');
    });
您会在网站上注意到,在打开的accordion面板上,背景跳跃41px,因为my:not()选择器没有拾取面板也有“.Activated”类,因此不应受到.hover函数的影响

HTML:


专业产品和解决方案

作为多个行业的全球领导者,索尼专业人士将世界一流的知识与突破性的技术相结合,激发企业的灵感,让客户惊叹。

4K数字电影

索尼4K的卓越分辨率将数字电影带入了沉浸式参与的新境界,创造了令人愉悦的终极体验–与我们合作,共同实现业务增长。

广播与专业影音

拍摄、编辑、广播、存档。无论您的优先事项是什么——从图像质量到生产效率——索尼都能让您毫不妥协地实现自己的愿景。

工业摄像机

从机器视觉到视觉通信和OEM会议解决方案,了解索尼影像专业技术的应用如何为工业环境提供市场领先的解决方案。

医学的

通过重新定义显示器、摄像头、放射成像仪、打印机和记录仪的清晰度,推动医疗成像的未来,索尼医疗创造了开创性的解决方案,包括3D解决方案,实现更清晰的诊断和更高效的工作流程。

投影仪、显示器和数字标牌

索尼旨在吸引注意力、吸引兴趣并在专业环境中添加惊喜因素,为各种规模的企业、组织、教育机构和场所带来卓越的图像质量。

运动场

最大限度地提高客户参与度和满意度,我们针对大型竞技场的一系列领先AV解决方案推动了脚步、支出、忠诚度和宣传–请参见与索尼合作的优势。

视频安全

查看技术最先进、基于网络的端到端视频安全解决方案–从混合和全高清IP摄像头到录像机和第三方兼容软件。


jQuery选择器在执行代码时返回与匹配的元素,因此它们不会反映发生之后对DOM的更改

您的代码将
hover
事件处理程序绑定到执行代码时未激活
类的元素(可能是在DOM就绪时),但添加该类不会删除这些事件处理程序


如果你想让他们做出动态反应,那就看看吧。

@JamesHill告诉你,我小小的大脑是如何发现代码和问题之间的差异的,但却没有发现代码的第一部分!!!感谢您知道,
$('.panel:not(.Activated')。悬停
仅影响在特定代码运行时未激活的元素(仅一次),对吗?运行该行代码后,将.Activated添加到元素将无法更改悬停事件绑定到的元素。添加了.HTML。我将“活动”更改为“已激活”,这与实时网页上显示的一样。我只是用“主动”来让它更普通、更简单。看来情况并非如此。谢谢你,我要看看这个网页。.on()是否替换为.live()?我想我以前使用过.live()来处理类似的事情。@DanielBly在1.7中添加了
.on()
函数来处理所有事件绑定,包括事件委派(以前由
.live()
.delegate()
处理)。好的,谢谢,我也会这样做使用hover作为事件?例如,我正在尝试此操作,但它不起作用?
$('.panel:not(.Activated)).on(“hover”,function(){$(this).css('background-position','0px top');});
嗨,我已经实现了.on()函数,但是使用mouseenter和mouseleave作为事件,但是它似乎仍然不起作用
<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>