JQuery选择div中的多个img之一(JQuery Select one of multiple img in div)

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

<!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。复制仍然可以作为一个链接

I'm new to JQuery and stuck on a simple problem. I wanted to take the markup below, and create a script that places a larger version of the mouse'd over img (one of the five from div) into p, "big". The one in "big" will match the last mouseover target, and will function as a link- just the same as the smaller version.

<!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>

This is the js script I've attempted to use ><. The closest I've come to success is getting [object Object] to appear multiple times (instead of the intended larger image).

//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)); };

What I am attempting to do- explained more concisely:

-1. is to hover over any one of the five image anchors (in div of the html document)

-2. for the image that is being moused over to appear as a copy at the top of the page (in the currently empty p slot)

-3. for that copy to be twice as wide and twice as long as the moused over target

-4. for the copy to still also function as a link

更多推荐