Question

我是jquery的新手，我正在尝试使用它在我非常简单的网页底部放置一个打印按钮，但我根本无法让它显示出来。（我将在页面上有更多内容进行打印，我还没有包含它，因为它没有必要）这是我到目前为止的代码：

<html>
<head>
<h1>This is my webpage</h1>
</head>
<body>
<div class="col_2">
<script>
<img src="print.png" class="printMe" alt="Print" title="Print"></a>
$('.printMe').click(function(){
     window.print();
});
</script>
<img src="gvsu.png">
<a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
</div>
</body>
</html>

Answer 1

我重写了代码并添加了jquery库。这个版本可以正常工作。只需替换为您自己的图像。

<html>
<head>
<title>This is your page title</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="col_2">
<h1>This is my webpage</h1>
<img src="print.png" class="printMe" alt="Print" title="Print" />
<img src="gvsu.png" />
<a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
<a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
</div>

<script>
$(document).ready(function() {
    $('.printMe').click(function(){
    window.print();
    });
});
</script>

</body>
</html>

Answer 2

只需将您的<img>代码放入HTML中即可，假设您的javascript（jQuery）很好！这里：

<html>
<head>
  <title> Hi </title>

</head>
<body>
    <div class="col_2">
    <h1>This is my webpage</h1>
    <img src="gvsu.png">
    <a href="https://www.linkedin.com"><img src="linkedin.png" alt="HTML tutorial" width="42" height="42"></a>
    <a href="https://www.twitter.com"><img src="twitter.png" alt="HTML tutorial" width="42" height="42"></a>
    <a href="https://www.facebook.com"><img src="fb.png" alt="HTML tutorial" width="42" height="42"></a>
    <img src="print.png" class="printMe" alt="Print" title="Print" />
    </div>
</body>
 <script>
    $(document).ready(function(){
     $('.printMe').click(function(){
         window.print();
     });

    })       
</script>
</html>

编辑：我为你重新整理了一下。通常，将脚本保留在页面的顶部或底部。

JQuery打印按钮没有显示

2 个答案: