Javascript函数无法在html中单击多个按钮

问题描述 投票：1回答：2

我没有javascript知识，从Stakeflow找到了一些提示，有了这个帮助我设法写下面的代码。我的页面中有5个图像，我正试图通过图像隐藏来发送邮件，但是当单击Image1时，此代码正在邮件正文上打印页面的URL，单击其他图像时URL不会出现。我也试图刷新页面，这不适用于此代码。当我多次按下Image1时，它会多次连接到邮件正文的URL。是否有任何方法可以简化此代码并在每次单击图像时在邮件正文上发送带有页面URL的邮件？代码是：

<!DOCTYPE html>
<html>
<head>
    <title>XYZ</title>
</head>

<body>
    <a id='mailTo' href="mailto:[email protected]?subject=Image1&body=URL: " method="post"><img src="Images1.png" onclick="subBod()">
    <a id='mailTo' href="mailto:[email protected]?ubject=Image2&body=URL: " method="post"><img src="Images2.png" onclick="subBod()" >
    <a id='mailTo' href="mailto:[email protected]?subject=Image3&body=URL: " method="post"><img src="Images3.png" onclick="subBod()">
    <a id='mailTo' href="mailto:[email protected]?subject=Image4&body=URL: " method="post"><img src="Images4.png" onclick="subBod()">
    <a id='mailTo' href="mailto:[email protected]?subject=Image5&body=URL: " method="post"><img src="Images5.png" onclick="subBod()">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            function subBod() {
             //var mbody = prompt("Please enter the ticket refrence number without initial OMY-");
             var mbody = document.URL;
             var href =  $("#mailTo").attr('href')  
             var  nRef = href + mbody
             $("#mailTo").attr("href", nRef)
             window.location.reload()
            };
        </script>
</body>
</html>

谢谢。

javascript jquery html email
2个回答
2
投票

id属性在同一文档中应该是唯一的，尝试用公共类替换重复的属性，如下面的代码段所示。

注意：既然你有一个公共类，你可以从JS代码直接将事件附加到它。

$('.mailTo').on('click', subBod);

function subBod() {
  var mbody = document.URL;
  var href = $(this).attr('href');
  var nRef = href + mbody;

  $(this).attr("href", nRef)

  console.log(href);

  window.location.href = nRef;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class='mailTo' href="mailto:[email protected]?subject=Image1&body=URL: " method="post"><img src="Images1.png"></a>
<a class='mailTo' href="mailto:[email protected]?ubject=Image2&body=URL: " method="post"><img src="Images2.png"></a>
<a class='mailTo' href="mailto:[email protected]?subject=Image3&body=URL: " method="post"><img src="Images3.png"></a>
<a class='mailTo' href="mailto:[email protected]?subject=Image4&body=URL: " method="post"><img src="Images4.png"></a>
<a class='mailTo' href="mailto:[email protected]?subject=Image5&body=URL: " method="post"><img src="Images5.png"></a>
0
投票

当您在图像周围使用锚点时，您不需要javascript。使用默认浏览器行为单击时，将执行锚点的URL。

对于HTML中的每个元素，ID属性必须是唯一的。您的任务不需要METHOD属性。

<a id='mailTo1' href="mailto:[email protected]?subject=Image1&body=URL: "><img src="Images1.png"></a>
    <a id='mailTo2' href="mailto:[email protected]?ubject=Image2&body=URL: "><img src="Images2.png"></a>
    <a id='mailTo3' href="mailto:[email protected]?subject=Image3&body=URL: "><img src="Images3.png"></a>
    <a id='mailTo4' href="mailto:[email protected]?subject=Image4&body=URL: "><img src="Images4.png"></a>
    <a id='mailTo5' href="mailto:[email protected]?subject=Image5&body=URL: "><img src="Images5.png"></a>

但是，如果您想使用JavaScript，那么有许多不同的实现方法。这是一个例子：

HTML

<img src="Images1.png" data-href="mailto:[email protected]?subject=Image1&body=URL:" />
<img src="Images2.png" data-href="mailto:[email protected]?subject=Image2&body=URL:" />
<img src="Images3.png" data-href="mailto:[email protected]?subject=Image3&body=URL:" />
<img src="Images4.png" data-href="mailto:[email protected]?subject=Image4&body=URL:" />
<img src="Images5.png" data-href="mailto:[email protected]?subject=Image5&body=URL:" />

JavaScript的

<script type="text/javascript">

    $(document).ready(function(){
        $('img').on('click', function(){
            var mailto = $(this).attr('data-href');
            window.location.href = mailto;
        });
    });

</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.