jQuery-点击 div 时摇动 - 无论我点击哪里都会摇晃

Question

我试图在单击 div ITSELF 时进行 <div> 抖动，但到目前为止，无论我在页面的哪个位置单击，上述 <div> 都会抖动。

这是我的代码：

#port-two {
  color: white;
  background: black;
  height: 250px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  text-align: center;
  font-size: 35px !important;
  font-family: 'Exo', sans-serif !important;
  font-weight: 200 !important;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  $(document).click(function() {
    $("#port-two").effect("shake");
  });
</script>

<div id="port-two" class="me">this is what's supposed to shake WHEN IT ITSELF IS CLICKED. It now shakes no matter where you click :(</div>

Answer 1

这只是因为您将事件处理程序附加到 document。要执行您需要的操作，您应该将其附加到 #port-two 元素。试试这个：

#port-two {
  color: white;
  background: black;
  height: 250px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  text-align: center;
  font-size: 35px !important;
  font-family: 'Exo', sans-serif !important;
  font-weight: 200 !important;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  $(function() {
    $('#port-two').click(function() {
      $(this).effect("shake");
    });
  });
</script>

<div id="port-two" class="me">It now shakes only when clicked :)</div>

Answer 2

您已将点击事件添加到 "document" 而不是您的元素。我还建议您封装任何相关的东西使用 $(document).ready...

到 DOM

$(document).ready(function() {
    $( "#port-two" ).click(function() {
        $(this).effect( "shake" );
    });
});

jQuery-点击 div 时摇动 - 无论我点击哪里都会摇晃

jQuery-shake-on-clik on div - shakes no matter where i click

jquery

html

shake