Question

我有一个div元素，我想在悬停时向其添加一个图标，但是jQuery仅在div不为空的情况下才添加该图标，否则不会发生任何事情。

$('div #tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  <p>The div isn't empty</p>
</div>

Answer 1

由于 div 和 id 引用相同的元素，因此选择器之间不应有任何空格。

请注意：由于id属性在文档中是唯一的，因此简单地使用$('#tags')就足以定位该元素。

$('#tags').hover(function() {
  $(this).append('<i class="fa fa-plus-circle ml-1 add-tag-icon"></i>')
}, function() {
  $(this).find("i").last().remove();
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
    <p>The div isn't empty</p>
</div>

仅当div不为空时，jQuery才会附加图标，否则不会发生任何事情。

如果div为空，则页面上没有可悬停的内容。请参见以下示例：

$('#tags').hover(function() {
  $(this).append('<p>+</p>')
}, function() {
  $(this).find("p").last().remove();
});

#tags{
  width: 100px;
  height: 15px;
  background-color: lightgray;
  border: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tags">
  
</div>

Answer 2

$('div #tags')在您的情况下为您的<div>选择错误。您所做的意味着 jQuery 正在#tags内查找ID为<div>的元素。相反，您需要将其设置为$('#tags')。

Answer 3

<div>和<p>元素的高度和宽度默认为0，因此不会产生悬停效果（您无法将鼠标悬停在元素上）：

<div id="tags"><p></p></div>

如果您在元素内部写入一些文本，则宽度和高度将发生变化，并且将产生悬停效果：

<div id="tags"><p>Not empty</p></div>

因此，如果<i>或div元素为空，则p不追加

jQuery仅在div不为空时才追加

3 个答案: