Question

我有以下html：

<li><a href="#" filename="prettygirls_1"><img src="large/prettygirls_1.jpg" alt="Pretty Girls Doing Horrid Things" /></a></li>
<li><a href="#" filename="prettygirls_2"><img src="large/prettygirls_2.jpg" alt="Pretty Girls Doing Horrid Things" /></a></li>

我正在尝试编写一些jquery，它将filename属性传递给变量，然后在新窗口中打开源文件的大版本。

我的jquery看起来像这样（我知道这是不正确的）：

$('div#slider ul li a').click(function() {
    var img_to_load = $(this).attr('filename');
    filePath = 'large/'; 
    $('<a href=" ' + filePath + img_to_load + '.jpg' + 'target="_blank"' + '</a>').html();
    //alert (img_to_load);
});

我如何构建它？

所有代码实际上都可以在这里找到：http://dev.jessicaharby.com/work/tempindex.cfm

Answer 1

试试这个：

<强> JS：

window.open(filePath + img_to_load + '.jpg', '', 'width=640,height=480');

更改宽度和高度以适应，或者如果您无法指定确切的宽度和高度，请使用

window.open(filePath + img_to_load + '.jpg');

请参阅window.open - MDN。

因为它在click事件上打开，所以只要打开的网址位于同一个域中，弹出窗口阻止程序就不会阻止它。

Answer 2

我建议：

$('ul li a').click(function(e) {
    // prevents the default action of the link's click-event ('e'), above
    e.preventDefault();
    // finds the 'img' element within the 'a', using 'find()`
    // and converts that, using '[0]' to a plain DOM node
    // and retrieves the full, absolute, 'src' from that element
    var img_to_load = $(this).find('img')[0].src,
        imgWindow = window.open(img_to_load, 'imgWindow');
});

JS Fiddle demo

上面会将随后点击的图像打开到同一个窗口中（用新图像元素重新打开打开的窗口），因为它首先会看到是否有一个打开了同名的窗口（在这种情况下{{1} }，'imgWindow'函数中的第二个参数），如果存在，则重复使用它。否则它将打开一个具有该名称的窗口。

如果您希望每次都在自己的窗口中打开图像，只需省略该参数，只需使用：

window.open()

JS Fiddle demo

参考文献：

$('ul li a').click(function(e) { e.preventDefault(); var img_to_load = $(this).find('img')[0].src, imgWindow = window.open(img_to_load); });（jQuery），（plain JavaScript）。
find()。
window.open()。

Answer 3

现在，代码提供了上述查询的解决方案。所以，试试http://codebins.com/codes/home/4ldqpb5

$(function() {
    $('div#slider ul li a').click(function(e) {
        e.preventDefault();
        var imageWin;
        var imageUrl = $.trim($(this).attr('filename')),
            imageWin = window.open(imageUrl);

    });
});

Answer 4

试试这个：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(document).on("click", "#btn", function(event) {
    window.open("http://www.google.com", '_blank');
});
</script>
<input type=button name="btn" id="btn">
</body>
</html>

jquery在新窗口中打开图像

4 个答案: