Question

我认为看起来如此简单让我难过。我想要一个包含产品缩略图的页面，这只是我的HTML中缩小到较小尺寸的完整图像。在临时弹出窗口中单击它以获取完整大小的图像。

这样可行，但是如何将图像名称作为变量传递，因此我不必为每个图像重写函数。例如，单击pic1.jpg，然后在其中获得带有pic1.jpg的弹出窗口。 pic2.jpg无限地在弹出窗口等中调用pic2.jpg。

这是我的HTML代码。

<p>
    <a href="javascript:productpop()">
        <img src="products/pic1.jpg" id="image" height="100" border=0 />
        <br />
        CLICK FOR POPUP
    </a>.
</p>

这是我的弹出窗口代码。

function productpop() {
    newproduct=window.open('','name','height=500,width=500');
    var tmp = newproduct.document;
    tmp.write('<html><head><title>Product Pop-up</title>');
    tmp.write('<link rel="stylesheet" href="productpop.css">');
    tmp.write('</head><body>');
    tmp.write('<p align="center">');
    tmp.write('<img src="products/pic1.jpg"></p>');
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window.    </p>');
    tmp.write('</body></html>');
    tmp.close();
}

提前感谢您的帮助。我想学习这一点，而不只是购买商业代码。

Answer 1

当你写入每个var时，你应该创建一个var对象数组并循环遍历数组。将图片行的名称更改为：

tmp[i].write("<img src=\"products/pic" + (i + 1) + ".jpg\"></p>");

Answer 2

您正在寻找的是您的功能的参数，即：

<p><a href="javascript:productpop('products/pic1.jpg')"><img src="products/pic1.jpg" id="image" height="100" border=0 /><br />CLICK FOR POPUP</a>.</p>

然后在您的函数中使用它：

function productpop(imagePath) {
    newproduct=window.open('','name','height=500,width=500');
    var tmp = newproduct.document;
    tmp.write('<html><head><title>Product Pop-up</title>');
    tmp.write('<link rel="stylesheet" href="productpop.css">');
    tmp.write('</head><body>');
    tmp.write('<p align="center">');
    tmp.write('<img src="' + imagePath + '"></p>');
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window.    </p>');
    tmp.write('</body></html>');
    tmp.close();
}

有关参数的更多信息，请参见here。

Answer 3

您可以通过函数中的参数传递id：

<a href="javascript:productpop(1)">
    <img src="products/pic1.jpg" id="image" height="100" border=0 />
</a>.

javascript函数应该像这样定义：

function productpop(picID) {
    newproduct=window.open('','name','height=500,width=500');
    var tmp = newproduct.document;
    tmp.write('<html><head><title>Product Pop-up</title>');
    tmp.write('<link rel="stylesheet" href="productpop.css">');
    tmp.write('</head><body>');
    tmp.write('<p align="center">');
    tmp.write('<img src="products/pic'+picID+'.jpg"></p>');
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window.    </p>');
    tmp.write('</body></html>');
    tmp.close();
}

通过这种方式，您将传递您必须手动输入元素的picID。

Answer 4

您可以将锚点更改为<a onclick="javascript:productpop(event)" href="#"> 然后您将可以访问代码中的src属性（尽管它将是整个URL）：

function productpop(event) { // Added argument
    newproduct=window.open('','name','height=500,width=500');
    var tmp = newproduct.document;
    tmp.write('<html><head><title>Product Pop-up</title>');
    tmp.write('<link rel="stylesheet" href="productpop.css">');
    tmp.write('</head><body>');
    tmp.write('<p align="center">');
    tmp.write('<img src="' + event.target.childNodes[1].src + '"></p>'); // Use argument to insert source
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window.    </p>');
    tmp.write('</body></html>');
    tmp.close();
}

因此，通过使其成为onclick事件，您可以访问所有事件信息，包括它的目标，即被点击并触发事件的元素。然后，您可以检索元素属性。

将图像ID传递给函数。

4 个答案: