觸發DIV獨立使用相同的腳本

我試圖讓每個藍格（<div id="rectangle"></div>）獨立點火。觸發DIV獨立使用相同的腳本

現在，如果你將鼠標懸停/點擊同時在第一位，無論是火，如果你將鼠標懸停/點擊了第二個，沒有火災。

這是一個常見的問題，並已在其他地方解決，但我試圖實現幾個不同的版本，並將其應用到這個特殊的代碼，它不工作。我希望有人能提供一些解釋，以幫助我學習，我可以比較我已經嘗試了其他職位理解上的差異是什麼。

$('.rectangle1').hide(); 
 
    $('#rectangle').on('click', function() { 
 
    clicked = !clicked; 
 
    }); 
 

 
    $('#rectangle').hover(function() { 
 
    $('.rectangle1').slideDown() 
 
    },function() { 
 
    if (!clicked) { 
 
     $('.rectangle1').slideUp() 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="rectangle"></div> 
 
<div class="rectangle1"></div> 
 

 
<div id="rectangle"></div> 
 
<div class="rectangle1"></div>

http://jsfiddle.net/Q5cRU/99/

來源

2017-11-11 bunnycode

有你爲什麼使用相同的'id'兩次什麼特別的原因？ – Eyzi

重複的ID無效，請改爲使用class = rectangle。您的懸停功能使用的代碼告訴每個.rectangle1向上或向下滑動，而不僅僅是緊跟在懸停元素之後的那個。點擊看起來像一個全局變量，所以它將在所有矩形之間共享。 – James

答案很簡單：事件偵聽器只適用於第一#rectangle。 jQuery不會選擇多個#ID'd元素。有人說，在多於一個的element上使用相同的id並不是語義。

下面是你在找什麼：http://jsfiddle.net/Q5cRU/116/

$(document).ready(function() { 

    $('.rectangle1').hide(); 

    $('.rectangle').data('clicked', false).click(function() { 

     $(this).data('clicked', !$(this).data('clicked')); 

    }).hover(
     function() { 

     $(this).next('.rectangle1').slideDown(); 

     }, 
     function() { 

      if (!$(this).data('clicked')) { 

      $(this).next('.rectangle1').slideUp(); 

      } 
     } 
    ); 
}); 

$("div.rectangle1").mouseover(function() { 
    $(this).stop(true, true).show(); 
});

來源

2017-11-11 03:28:44 sgiant

明白了。非常感謝！ – bunnycode

的一個問題是，你正在使用id="rectangle"的兩個元素。 According to MDN：

id全局屬性定義了一個唯一的標識符（ID），它在整個文檔中必須是唯一的。

jQuery只是將事件偵聽器添加到具有該ID的第一個元素。

來源

2017-11-11 03:15:37

井HTML，id屬性必須是每個元素獨一無二的。 See this。類屬性可以被多個元素共享以具有相同的樣式效果或相同的用途。所以第一個和第二個div不能有相同的ID - 「矩形」。要獨立觸發事件，您可以爲其分配不同的ID。

來源

2017-11-11 03:21:27 sandy

HTML：

<div> 
    <div class="rectangle"></div> 
    <div class="rectangle-hover"></div> 
</div> 

<div> 
    <div class="rectangle"></div> 
    <div class="rectangle-hover"></div> 
</div>

CSS：

.rectangle { 
    width: 140px; 
    height: 80px; 
    background: #037CA9; 
    margin-bottom:10px; 
} 

.rectangle-hover { 
    width: 140px; 
    height: 150px; 
    background: red; 
}

的Javascript：

$(function(){ 

    var clicked = false; 

    $('.rectangle-hover').hide(); 

    $('.rectangle').hover(
     function(){ 
      $(this).parent().find('.rectangle-hover').slideDown(); 
     }, 
     function(){ 
      if (!clicked) { 
       $('.rectangle-hover').slideUp() 
      } 
     } 
    ); 

});

來源

2017-11-11 03:22:53 Eyzi

觸發DIV獨立使用相同的腳本

回答

相關問題