刪除 mouseleave (Jquery) 中的附加元素

Question

我希望當鼠標懸停在圖像上時彈出圖像（顯示更大的版本）並在鼠標離開圖像時刪除附加元素。 這是相關的代碼：

var imgs;
$(document).on('mouseenter', '.gallery li', function() {
    $(this).find('img').addClass("gray");
    imgs = `<div id="preview"> <img src="images/medium/${$(this).find('img').attr('id')}"
                alt="${$(this).find('img').attr('alt')}"/>`;
    var info = `<p>
                'Title': ${$(this).find('img').attr('alt')}
                'City': ${$(this).find('img').attr('city')}
                'Date Taken': ${$(this).find('img').attr('taken')}
                </p></div>`;
    imgs += info;
    $("body").append($(imgs));
    // console.log(imgs);
})

$(document).on("mousemove", function( event ) {
    $("#preview").css("left", event.pageX);
    $("#preview").css("top", event.pageY);
});
 
$(document).on("mouseleave", '.gallery li', function() {
    // $("body").remove();
    // $("body").find('img').removeClass("gray");
    // $("body").remove($(imgs));
    alert('hello');
})

#preview {
    position: absolute;
    padding: 10px 10px 0 10px;
    /* display: none; */
    background-color: #424242;
}
.gray {
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

<main class="container">     
    <ul class="gallery">
    </ul>
          
</main>

Mousleave沒有像我預期的那樣工作。 而是將div附加到正文。 在調試時，我發現mouseleave在鼠標移動時被執行（每次鼠標移動時都會彈出警報消息）。 此外，鼠標光標下彈出的圖像不會改變。 它保持不變。 我想在mouseenter期間彈出附加元素，這樣每次鼠標懸停在圖像上時，都會在mouseenter和mouseleave上進行追加和彈出。

輸出顯示像這樣。 div出於某種原因不遵守事件坐標。 圖像顯示在底部。

Answer 1

你的div有id="preview"所以你需要id selector #來獲取元素。

使用$('#preview').remove()它將起作用。

或者你可以添加class="preview"然后$(".preview").remove(); 將工作。

編輯添加到top和left偏移量，因此當鼠標移動時它不會閃爍。

下面試試看。 添加class="preview"並使用class selector . 作為$('.preview') 。

 var xOffset = 3; var yOffset = 3; $(document).on('mouseenter', '.gallery li', function() { $(this).find('img').addClass("gray"); imgs = `<div id="preview" class="preview"> <img src="https://i.stack.imgur.com/L6RvS.png?s=328&g=1" alt="k"/>`; var info = `<p> 'Title': ${$(this).find('img').attr('alt')} 'City': ${$(this).find('img').attr('alt')} 'Date Taken': ${$(this).find('img').attr('alt')} </p></div>`; imgs += info; $("body").append($(imgs)); // console.log(imgs); }) $(document).on("mousemove", function(event) { $("#preview") .css("top",(event.pageY + xOffset) + "px") .css("left",(event.pageX + yOffset) + "px"); }); $(document).on("mouseleave", '.gallery li', function() { $(".preview").remove(); })

 #preview { position: absolute; padding: 10px 10px 0 10px; /* display: none; */ background-color: #424242; } .gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <main class="container"> <ul class="gallery"> <li> <img src="https://i.stack.imgur.com/L6RvS.png?s=48&g=1" alt="K" /> </li> </ul> </main>

Answer 2

您應該將圖像所在的li元素的index()傳遞給.preview元素的id 。 此外，您可以使用 jQuery Deffered和.when() （這是可選的）。 下面是一個例子。

var df = $.Deferred();
var xOffset = 3;
var yOffset = 3;

$(document).on('mouseenter', '.gallery li', function() {
  $(this).find('img').addClass("gray");
  let imgs = `<div class="preview"> <img src="https://i.stack.imgur.com/L6RvS.png?s=328&g=1"
                alt="k"/>`;
  var info = `<p>
                'Title': ${$(this).find('img').attr('alt')}
                'City': ${$(this).find('img').attr('alt')}
                'Date Taken': ${$(this).find('img').attr('alt')}
                </p></div>`;
  imgs += info;
  let imgObj = $(imgs);
  imgObj.attr("id", "preview-"+$(this).index());
  $("body").append(imgObj );
  df.resolve( true );
});
 
$.when( df ).done(function ( v ) {
  if(v) {
      $(document).on("mousemove", '.gallery li', function(event) {
          $("#preview-"+$(this).index())
            .css("top",(event.pageY + xOffset) + "px")
            .css("left",(event.pageX + yOffset) + "px");
      });

      $(document).on("mouseleave", '.gallery li', function() {
          $("#preview-"+$(this).index()).remove();
      });
  }
});

這是一個例子。

 var df = $.Deferred(); const xOffset = 3; const yOffset = 3; $(document).on('mouseenter', '.gallery li img', function(event) { $(event.target).addClass("gray"); let alttext = $(event.target).attr('alt'); let imgs = `<div class="preview"> <img src="https://picsum.photos/id/237/200" alt="k"/>`; var info = `<p> 'Title': ${alttext} 'City': ${alttext} 'Date Taken': ${alttext} </p></div>`; imgs += info; let imgObj = $(imgs); imgObj.attr("id", "preview-"+$(event.target).parent().index()); $("body").append(imgObj ); df.resolve( true ); }); $.when( df ).done(function( v ) { if(v) { $(document).on("mousemove", '.gallery li img', function(event) { event.stopPropagation(); $("#preview-"+$(event.target).parent().index()) .css("top",(event.pageY + xOffset) + "px") .css("left",(event.pageX + yOffset) + "px") .css("display","block"); }); $(document).on("mouseleave", '.gallery li img', function(event) { $("#preview-"+$(event.target).parent().index()).remove(); }); } });

 [id^="preview-"] { position: absolute; z-index: 9999; padding: 10px; display: none; background-color: #424242; display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; width: 11rem; // you may use percentage eg 20% or viewport units here eg 10vw } [id^="preview-"] img { width: 100%; height: auto; } .gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <main class="container"> <ul class="gallery"> <li> <img src="https://picsum.photos/id/237/70" alt="K" /> </li> </ul> </main>