javascript - jQuery - 仅当满足某些 HTML 属性时才在鼠标光标旁边显示图像

Question

我目前有一个图像在鼠标悬停在 div 上时显示...但是如果“div”的 HTML 属性为“align="center" 并且没有，我只显示鼠标旁边的图像那么我不想显示图像？

我想我很安静，但我不知道如何调用 var“divalign”属性，昨晚花了一整夜：S

$(document).ready(function() {
    var $img = $("#MainImage");
    $img.hide();
    var divalign = $("div").attr("align="center");
    $('div').mousemove(function(e) {
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
    }).mouseleave(function() {
        $img.fadeOut(250);
    });
});

提前致谢。

Answer 1

  $('div').mousemove(function(e) {
      if ($(this).attr('align') === 'center') {
        // only show if the align attribute has value center
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
        $img.fadeOut(250);
    });

Answer 2

你在这一行有错误

 var divalign = $("div").attr("align="center");

将其更改为

 var divalign = $("div").attr("align","center");

Answer 3

如果你能给这些 DIV 一个类名（例如：class="alignCenter"），然后在这些 div 上注册事件处理程序，它会更简洁。

$('div.alignCenter').on('mousemove', function(e) {
     ..........................

});

Answer 4

尝试这个：

$('div[align="center"]').mousemove(function(e) {
        $img.fadeIn(0);
        $img.offset({
            top: e.pageY - $img.outerHeight()-2,
            left: e.pageX - ($img.outerWidth()-18)
        });
      }
    }).mouseleave(function() {
        $img.fadeOut(250);
    });