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

一个问题是你使用id="rectangle"作为两个元素。 According to MDN：

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

jQuery只是将事件侦听器添加到具有该ID的第一个元素。

Answer 2

在HTML中，每个元素的id属性必须是唯一的。 See this。 class属性可以由多个元素共享，以具有相同的样式效果或相同的目的。因此，第一个和第二个div不能具有相同的ID - ＆＃34;矩形＆＃34;。要独立触发事件，您可以为它们分配不同的ID。

Answer 3

HTML：

seen

CSS：

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

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

使用Javascript：

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

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

Answer 4

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

以下是您要找的内容：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();
});

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

4 个答案: