.hover（）和.append（）追加多個元素

Question

所以我得到了這段代碼：

$(".l-definition").on({
  mouseenter : function() {
    var definition = $(".l-definition").attr('data-label');
    $(this).append("<div class='definition'>" + definition + "</div>");
    $(".definition").show(300);
  },
  mouseleave: function() {
    $(".definition").hide(300);
  }
});

使用jQuery在懸停項上附加項。

有時它增加了該項目多次，因為光標多次懸停元件不期而遇，發生在視覺缺陷與.show()和.hide()

如何防止jQuery這樣做？

這是一個片段：

 $(function() { $(".l-definition").on({ mouseenter: function() { var definition = $(".l-definition").attr('data-label'); $(this).append("<div class='definition'>" + definition + "</div>"); $(".definition").fadeIn(300); }, mouseleave: function() { $(".definition").fadeOut(300); } }); }); 

 p { margin-top: 100px; } .definition { display: none; padding: 5px 10px; border-radius: 5px; left: 50%; top: -70%; position: absolute; font-size: .8em; font-weight: 300; background-color: #ededed; -webkit-transform: translate(-50%, -100%); -moz-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .definition::after { content: ''; position: absolute; left: calc(50% - 10px); top: 100%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #e8e8e8; clear: both; } .l-definition { font-weight: 600; cursor: pointer; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Lorem ipsum dolor sit amet consetetur sadipscing <span class="l-definition" data-label="Chromium is a chemical element">Chromium</span></p> 

Answer 1

如果您所做的只是顯示工具提示，為什么不使用after偽選擇器，那么您將不需要任何jquery。

我已經評論了下面的代碼

 p { margin-top: 100px; } .l-definition:after { content: attr(data-label); /* use attr for text */ padding: 5px 10px; border-radius: 5px; left: 50%; top: -10px; /* minus height of arrow */ position: absolute; font-size: .8em; font-weight: 300; background-color: #ededed; opacity:0; /* opacity */ transition: opacity 0.3s; /* transition opacity over 300ms */ pointer-events:none; /* this is so you can mouse things under hidden tooltip */ -webkit-transform: translate(-50%, -100%); -moz-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .l-definition::before { content: ''; position: absolute; left: calc(50% - 10px); bottom: 100%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #e8e8e8; clear: both; transition: opacity 0.3s; pointer-events:none; opacity:0; } .l-definition:hover:after, /* change opacity to 1 when hovered */ .l-definition:hover:before{ opacity:1; pointer-events:auto; } .l-definition { font-weight: 600; cursor: pointer; position: relative; } 

 <p>Lorem ipsum dolor sit amet consetetur sadipscing <span class="l-definition" data-label="Chromium is a chemical element">Chromium</span></p> 

如果您想堅持使用jQuery，那么我會這樣做：

 $(".l-definition").each(function() { var label = $(this), definition = $('<div class="definition">' + label.data('label') + '</div>'); // cache these objects for better performance label.on({ mouseenter: function() { label.append(definition.fadeIn(300)); // append definition and fade in }, mouseleave: function() { definition.fadeOut(300, function() { // fadeout definition and then remove once animation complete $(this).remove(); }); } }); }); 

 p { margin-top: 100px; } .definition { display: none; padding: 5px 10px; border-radius: 5px; left: 50%; top: -70%; position: absolute; font-size: .8em; font-weight: 300; background-color: #ededed; -webkit-transform: translate(-50%, -100%); -moz-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .definition::after { content: ''; position: absolute; left: calc(50% - 10px); top: 100%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #e8e8e8; clear: both; } .l-definition { font-weight: 600; cursor: pointer; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Lorem ipsum dolor sit amet consetetur sadipscing <span class="l-definition" data-label="Chromium is a chemical element">Chromium</span></p> 

Answer 2

您可以檢查definition標記是否已經存在，例如：

if ($(this).find('.definition').length<=0) 
    $(this).append("<div class='definition'>" + definition + "</div>");

還添加了stop(true,true)以停止先前的動畫。

$(".definition").stop(true,true).show(300);

我還修復了它，使其可以使用更多定義，因為您忘記了使用$(this)並且所有定義都在mouseover / out上觸發。

修復演示：

 $(".l-definition").on({ mouseenter : function() { var definition = $(this).attr('data-label'); if ($(this).find('.definition').length<=0) $(this).append("<div class='definition'>" + definition + "</div>"); $(this).find(".definition").stop(true,true).show(300); }, mouseleave: function() { $(this).find(".definition").hide(300); } }); 

 p{ margin-top:100px; } .definition{ display:none; padding:5px 10px; border-radius:5px; left: 50%; top: -70%; position: absolute; font-size:.8em; font-weight:300; background-color: #ededed; -webkit-transform: translate(-50%, -100%); -moz-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } .definition::after{ content: ''; position: absolute; left: calc(50% - 10px); top: 100%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #e8e8e8; clear: both; } .l-definition{ font-weight: 600; cursor:pointer; position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Lorem ipsum dolor sit amet consetetur sadipscing <span class="l-definition" data-label="Chromium is a chemical element">Chromium</span></p> <span class="l-definition" data-label="You were creating duplicate definition, but never checked does it already exists (or remove before append).">What was wrong?</span> 

Answer 3

您確實要維護發生事件的元素的context ，否則，如果您有多個具有相同類的元素，那么您將始終獲得第一個元素的label並將操作應用於所有此類元素。

因此，請更改：

var definition = $(".l-definition").attr('data-label');

至：

var definition = $(this).data('label'); //also take advantage of the data method.

您還可以考慮更改：

$(".definition").....

至：

$(".definition", this).....

如果您不希望對所有現有的.definition元素進行操作。

Answer 4

調用.stop()以停止所有正在進行的動畫，並確保.remove()已添加的內容。

但我建議一種更好的方法。 現在您有：

<div class="l-definition" data-label="Label text">Main text</div>

但是為什么不這樣做呢？

<div class="l-definition">
  Main text
  <div class="definition">Label text</div>
</div>

+ CSS：

.l-definition>.definition {
    display: none;
    animation: fade 300ms linear both;
}
.l-definition:hover>.definition {
    display: block;
}
@keyframes fade {
    from {opacity: 0}
    to   {opacity: 1}
}

通過更好地支持搜索引擎和純文本瀏覽器等功能，可以更好地完成工作！

Answer 5

$(".l-definition").on({
  mouseenter : function() {
    var definition = $(".l-definition").attr('data-label');
    if (!$(this).find('.definition').length) {
      $(this).append("<div class='definition'>" + definition + "</div>");
      $(".definition").show(300);
    }

  },
  mouseleave: function() {
    $(".definition").hide(300);
  }
});

Answer 6

只需在附加新內容之前清除它們

$(".definition").remove();
$(this).append("<div class='definition'>" + definition + "</div>");