JQuery Select div 中的多个 img 之一

Question

我是 JQuery 的新手，遇到了一个简单的问题。我想采用下面的标记，并创建一个脚本，将鼠标放在 img 上的较大版本（div 中的五个之一）放入 p，"big"。 "big" 中的那个将匹配最后一个鼠标悬停目标，并且将作为 link 运行 - 与较小的版本相同。

<!doctype html>
    <html>
        <head>
            <meta charset = "UTF-8"/>
            <title>Image Links</title>
        </head>
        <body>
            <p id = "big">

            </p>
            <div id = "links">
                <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();">
                <a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100">
                <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
                <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
                <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
            </div>
            <script src="jquery-3.1.0.js"></script>
            <script src = "Test 3.js"></script>

        </body>
    </html>

这是我尝试使用的 js 脚本 ><.我最接近成功的是让 [object Object] 出现多次（而不是预期的更大图像）。

//intended to increase the size of imgs in div, and place the larger image at the top of the document

var enlargeCopy = function () {

    var x = $(".links").children("img").css("width", "*=2");
    var x = $(".links").children("img").css("height", "*=2");

    document.getElementById("big").appendChild(document.createTextNode(x));
};

我正在尝试做的事情-更简洁地解释：

-1。是将鼠标悬停在五个图像锚点之一上（在 html 文档的 div 中）

-2。将鼠标悬停在页面顶部的图像显示为副本（在当前空的 p 槽中）

-3。使该副本的宽度和长度是鼠标悬停在目标

上的两倍

-4。副本仍然可以作为 link

Answer 1

如果我正确地理解你，你想克隆图像并将其附加到鼠标悬停时的某个元素，对吗？也许你可以使用 jQuery 的克隆方法：

$('#links a').on('mouseover', function(){
  $(this).clone().appendTo('#big');
  var originalWidth = $(this).find('img').width();
  var originalHeight = $(this).find('img').height();
  $('#big, #big img').css({'width': originalWidth * 2 + 'px', 'height': originalHeight * 2 + 'px'});
});

另外，你应该像这样关闭你的锚标签 </a>.

我也给你做了一个FIDDLE。

Answer 2

这就是我要做的：

-首先为您要使用的五个 <a> 添加相同的名称。例如：

<a name="exampleLink" href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" >

-然后给这个名字添加一个evenlistener:

$( document ).ready(function() {  
   $('a[name=exampleLink]').mouseover(function() {
         $(this).clone().appendTo($('#big').empty());
   });
});

现在你只需要按照你说的做最大的img，但我没有时间，肯定有人可以编辑！

Answer 3

<p>
  <img src="" id="big" style="display: none;"> <!-- empty hidden image -->
</p>
<div id="links">
  <a href="http://google.com">
    <img border="0" alt="1" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" width="100" height="150" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="2" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" width="200" height="100" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="3" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" width="100" height="100" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="4" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/jq-global-nav.png" width="100" height="100" />
  </a>
</div>


  $('#links a').mouseover(function(){
    var $el = $(this).children('img');
    $('#big')
      .attr('src', $el.attr('src'))
      .width($el[0].naturalWidth * 2)
      .height($el[0].naturalHeight * 2)
      .show();
  });

Answer 4

您需要将选择器修改为 $("#links") 而不是 $(".links") 您修改后的函数如下。
var enlargeCopy = function () { var x = $("#links").children("img").css("width", "*=2"); var x = $("#links").children("img").css("height", "*=2"); document.getElementById("big").appendChild(document.createTextNode(x)); };

JQuery Select div 中的多个 img 之一

JQuery Select one of multiple img in div

javascript

jquery

html

css

onmouseover