Javascript 使用相同的脚本独立地触发每个div

我正试图让每一个蓝色分区（

）独立开火

现在，如果您将鼠标悬停/单击在第一个按钮上，两个按钮都会同时启动，如果您将鼠标悬停/单击在第二个按钮上，两个按钮都不会启动

这是一个常见的问题，已经在其他地方解决了，但是我尝试实现了几个不同的版本，并将其应用到这个特定的代码中，但它不起作用。我希望有人能提供一些解释来帮助我学习，我可以与我尝试过的其他帖子进行比较，以了解两者的区别

$（'.rectangle1'）.hide（）；
$（'#矩形'）。在（'单击'，函数（）上）{
点击=！点击；
});
$（'#矩形'）。悬停（函数（）{
$（'.rectangle1'）.slideDown（）
}，函数（）{
如果（！单击）{
$（'.rectangle1'）.slideUp（）
}
});  
});
一个问题是您对两个元素使用了
id=“rectangle”
：

id全局属性定义一个唯一标识符（id），该标识符在整个文档中必须是唯一的

jQuery只是将事件监听器添加到具有该ID的第一个元素。
一个问题是，您对两个元素使用了
ID=“rectangle”
：

id全局属性定义一个唯一标识符（id），该标识符在整个文档中必须是唯一的

jQuery只是将事件侦听器添加到具有该ID的第一个元素中。
在HTML中，每个元素的ID属性必须是唯一的。class属性可以由多个元素共享，以具有相同的样式效果或相同的用途。因此，第一个和第二个div不能具有相同的id——“矩形”。要独立触发事件，您可以为它们分配不同的id
 在HTML中，每个元素的id属性必须是唯一的。class属性可以由多个元素共享，以具有相同的样式效果或相同的用途。因此，第一个和第二个div不能具有相同的id——“矩形”。要独立触发事件，您可以为它们分配不同的id
 HTML：

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

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

Javascript:

$(function(){

    var clicked = false;

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

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

});

HTML:

Javascript:

$(function(){

    var clicked = false;

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

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

});

答案很简单：事件侦听器仅应用于第一个
#矩形
。jQuery不会选择多个
#ID
'd元素。尽管如此，在多个
元素
上使用相同的
id
并不是语义上的

以下是您正在寻找的内容：

答案很简单：事件侦听器仅应用于第一个
#矩形
。jQuery不会选择多个
#ID
'd元素。尽管如此，在多个
元素
上使用相同的
id
并不是语义上的

以下是您正在寻找的内容：

您使用相同的
id
两次有什么特殊原因吗？重复的id无效，请改用class=rectangle。悬停函数使用的代码告诉every.rectangle1向上或向下滑动，而不仅仅是紧跟悬停元素之后的代码。单击看起来像一个全局变量，因此它将在所有矩形之间共享。是否有任何特殊原因导致您使用相同的
id
两次？重复的id无效，请改用class=rectangle。悬停函数使用的代码告诉every.rectangle1向上或向下滑动，而不仅仅是紧跟悬停元素之后的代码。单击看起来像一个全局变量，所以它将在所有矩形之间共享。明白了。非常感谢！知道了。非常感谢！
$(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();
});