Question

当鼠标悬停在屏幕上的图像上时，我需要添加一个div，这会在视口的底部创建同一图像的较大版本。不幸的是，我认为我没有正确执行此操作，因为在为div创建新节点时，它无法识别某些元素。它无法识别图像的高度。

这是我的jQuery代码：

$(function(){
  $(".img-responsive").mousemove(function(e) {
    $("main").append(
      var alt = $(this).attr("alt");
      var src = $(this).attr("src");
      var newsrc = src.replace("small","medium");

      var preview= $('<div id="preview"></div>');
      var image = $('<img src="' + newsrc + '">');
      var caption = $('<p>' + alt + '</p>');
    );
  });
});

这是HTML：

<img src="images/5857298322.jpg" alt="image 1" class="img-responsive">
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.  </p>
<p><button class="btn btn-primary" type="button">View details</button></p>

Answer 1

您的JavaScript代码的语法无效。您正在调用jQuery元素的append方法，该方法需要HTML字符串，DOM元素或文本，数组或其他jQuery元素。

相反，您尝试传递一系列语句，JavaScript不支持该语句。检查您的浏览器控制台，它可能会显示一个或多个语法错误消息。

要修复代码，可以在append方法调用之前之前移动语句，然后将要创建的jQuery元素作为数组传递，如下所示：

$(function(){
  $(".img-responsive").mousemove(function(e) {
    var alt = $(this).attr("alt");
    var src = $(this).attr("src");
    var newsrc = src.replace("small","medium");

    var preview= $('<div id="preview"></div>');
    var image = $('<img src="' + newsrc + '">');
    var caption = $('<p>' + alt + '</p>');
    $("main").append([preview, image, caption]);
  );
  });
});

Answer 2

由于您创建的$this参考是错误的，因此无法获取图像的高度。根据您的代码，$this是指$("main")元素而不是图像。选择器也应该是class / id / tag，$("main")不是有效的HTML标签。

总的来说，我发现您的Jquery语法错误，但是我可以理解您正在尝试实现的目标。我创建了一个工作提琴，希望这能解决您的问题。

中部链接：https://jsfiddle.net/Baliga/ub83xezo/21/

jQuery-如何在DOM底部添加新的div

2 个答案: