Question

我对jQuery很新，我遇到了一些问题。这些代码片段有什么区别？我认为他们会做同样的事情。

＆＃13;

$("p.expendable").on('mouseover', function(){
  $(this).remove();
});

$('p').on('mouseover', function() {
  $('p.expendable').remove();
});

＆＃13;

Answer 1

他们是不同的。

考虑到第一种情况，如果当前悬停的p元素具有expendable类，则它将删除该特定元素。

＆＃13;

$("p.expendable").on('mouseover', function() {
  $(this).remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expendable"> Testing</p>
<p> Testing 2</p>
<p> Testing 3</p>

＆＃13;

在第二种情况下，当前悬停的元素是任何p标记，无论它是否有任何类，然后它将删除所有p元素，这些元素具有消耗性＆＃39;类

＆＃13;

$('p').on('mouseover', function() {
  $('p.expendable').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="expendable"> Testing</p>
<p> Testing 2</p>
<p> Testing 3</p>

＆＃13;

Answer 2

委托更清洁

$(document).delegate("p.expendable", 'mouseover', function(){
   $(this).remove();
});

它说，如果创建了p.expendable，则附加删除自身的函数。（已弃用！）这个@ epascarello

的好消息

请使用

$(document).on("p.expendable", 'mouseover', function(){
       $(this).remove();
    });

或只是

$("p.expendable").on('mouseover', function(){
           $(this).remove();
        });

快乐的编码！

这两个jQuery代码片段有什么区别？

2 个答案: