同じスクリプトを使用して各divを独立にトリガーします

Question

私は各青いdiv（<div id="rectangle"></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/

Answer 1

答えは簡単です：イベントリスナーは、最初#rectangleに適用されました。 jQueryは1つ以上の要素を選択しません。#ID要素です。そのように言われても、同じidを複数の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(); 
}); 

Answer 2

一つの問題は、次の2つの要素のid="rectangle"を使用していることです。 According to MDN：

idグローバル属性は、ドキュメント全体で一意でなければならない一意の識別子（ID）を定義します。

jQueryは、そのIDを持つ最初の要素にのみイベントリスナーを追加します。

Answer 3

HTMLでは、id属性は要素ごとに一意である必要があります。 See this。クラス属性は、同じスタイル効果または同じ目的を持つ複数の要素によって共有することができます。だから、第1と第2のdivは同じid - "rectangle"を持つことはできません。独立してイベントを発生させるために、異なるIDを割り当てることができます。

Answer 4

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() 
      } 
     } 
    ); 

});