jQuery：not（）selector addClass（）之後的元素不工作（實時/實時）

Question

我有一個使用：not（）選擇器/排除器的問題。我正在做的是增加一個'.Activated'類來開放手風琴小組（class'.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'); 
    }); 

你會認爲在打開的手風琴面板背景跳躍41px因爲我在網站上看到該面板還具有'.Activated'類，因此不應受到.hover函數的影響。

HTML：

<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> 

Answer 1

jQuery選擇返回時執行代碼匹配的元素，使發生後，他們將不會反映後更改DOM。

當代碼執行時（大概在DOM準備就緒時），您的代碼會將hover事件處理程序綁定到沒有Activated類的元素，但添加該類將不會刪除這些事件處理程序。

如果您希望它們動態反應，請查看event delegation。