在html代码中使用动态变量调用函数

如何解决在html代码中使用动态变量调用函数

当有人点击相关图片时，我需要复制电子邮件地址。

我将所有内容都写在一个 html 文件中，但现在我将代码传输到 .js 中，这样我就可以使用 JSON 来存储员工数据，而不是一一编写。问题是我有一个在单击图像时调用的函数，但在我使用 buildStaff 时不起作用。

我是这样写的：

<img class="imagecopy" id="copy-button-${ID}" src="copyIcon.png" onclick="copyEmail('email-1','toolTip-1')">

我现在有了这个：

function buildStaff(staff,ID) {
  return `
    <div class="staffGroup">
        <span class="staffTextGroup">
            <p class="name"> ${staff.name} <\p>
            <span class="email" id="email-${ID}"> ${staff.email} <\span>
        </span>
        <span class="copyButton">
            <span class="toottipText" id="toottip-${ID}"> copied. <\span>
            <img class="imagecopy" id="copy-button-${ID}" src="copyIcon.png">
        <\span>
    </div>
  `;
}

我只是找不到将动态变量用于 copyEmail 函数的方法。

非常感谢！这是我第一次做网站，所以有点迷茫。

编辑

这是完整的原始 JS 代码，但在 onclick="copyEmail() 中没有 img。

$(document).ready(() => {
    let staffAnchor = $('[staff-anchor]');

    fetchFromJson(STAFF_JSON_FILE_PATH,StaffData => {
        StaffData.staff.forEach((staff,i) => {

            const ID = `staff-${i}`;
                
            let staffElement = buildStaff(staff,ID);
            $(staffAnchor).append(staffElement);
        });
    });
});

function fetchFromJson(jsonFilePath,callback) {
    $.getJSON(jsonFilePath,callback);
}

function buildStaff(staff,ID) {
    return `
        <div class="staffGroup">
            <span class="staffTextGroup">
                <p class="name"> ${staff.name} <\p>
                <span class="email" id="email-${ID}"> ${staff.email} <\span>
            </span>
            <span class="copyButton">
                <span class="toottipText" id="toottip-${ID}"> copied. <\span>
                <img class="imagecopy" id="copy-button-${ID}" src="copyIcon.png" alt="copy image">
            <\span>
        </div>
    `;
}

function copyEmail(id,tooltip) {
    var r = document.createrange();
    r.selectNode(document.getElementById(id));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(r);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
}

问题是我找不到使用 copyEmail() 的方法，因为我不能简单地将它写在 HTML 中。

解决方法

在动态添加的标记中响应用户操作是有助于区分 HTML 元素和 DOM 元素的情况之一。我们使用 .innerHTML 属性添加一串 HTML，然后 JS 解析该字符串以构建相应的 DOM 节点子树；然后我们可以使用 .getElementById 之类的方法选择和操作它们中的任何一个。）

在这种情况下，我们希望事件侦听器访问新树中几级以下的某些元素 -- 特别是用作按钮的 img 和 {{ 1}} 包含工作人员的电子邮件地址。

此解决方案从 span 返回对新 DOM 元素的引用，因此我们可以添加 buildStaff 函数作为其上的点击列表。 copyEmail 元素由 img 类区分，类似地，span 获得一个 copyEmailBtn 类，因此 JavaScript 可以知道在哪里可以找到电子邮件。

（在代码片段中，我只是记录了电子邮件以显示侦听器可以访问它，但是当然您可以使用该值执行任何您喜欢的操作：将其缓存在浏览器中，将其发送到服务器，使用它来发送电子邮件等）

emailEl

// Identifies container element and defines data 
const
  container = document.getElementById("container"),myId = "myId",spock = {
    name: "Spock",email: "spock@starfleet.org"
  };

// Makes staff element,using the above info
const staffEl = buildStaff(spock,myId,container);

// Calls copyEmail whenever user clicks in staffEl
staffEl.addEventListener("click",copyEmail);

// Defines `copyEmail`
function copyEmail(event){
  const
    staffEl = event.currentTarget,// Element w/ listener
    clickedThing = event.target; // Clicked descendant
 
  // Ignores irrelevant clicks 
  if(!clickedThing.classList.contains("copyEmailBtn")){
  return;
}
  // Finds email within staffEl,does something with it
  const
    emailEl = staffEl.getElementsByClassName("emailEl")[0],email = emailEl.textContent.trim();
  console.log("Copied email:",email);
}

// Defines `buildStaff` (`parentEl` will contain the new div)
function buildStaff(staff,ID,parentEl) {
  const
    // Destructures staff obj to make local variables
    {name,email} = staff,// Builds strings using `ID` and binds them to variables
    emailId = `email-${ID}`,buttonId = `copy-button-${ID}`;

  // Defines new HTML (w/ emailEl & copyEmailBtn classes)
  const newHTML = `
    <div class="narrow">
      <div class="text">
        <div> ${name} </div>
        <div class="emailEl" id="${emailId}"> ${email} </div>
      </div>
      <div class="button">
        <span> Click to copy email → </span> 
        <span><img class="copyEmailBtn" id="${buttonId}" src="copyIcon.png"></span>
      </div>
    </div>
    `;
  // Inserts new HTML
  parentEl.innerHTML = newHTML;
  
  // Returns the DOM element representing the new <div>
  const staffEl = container.children[0];
  return staffEl;
}

.narrow{ width: 200px; }
.text{ padding: 4px; border: 1px solid lightgrey; }
img{ margin-left: 10px; }
.button{ margin-top: 10px; font-weight: bold; }

（注意：JavaScript 模板文字中的插值似乎不适用于通过点表示法访问的对象属性，因此我从 {{1} } 对象，然后将它们粘贴到 HTML 中。）

当有人点击相关图片时，我需要复制电子邮件地址。

复制到剪贴板仅适用于具有 .value 属性的输入元素，您不能在具有 .innerHTML 属性的 .execCommand 等元素上使用 <div>,<p>,<span>...。

一种解决方法是创建一个临时的 textarea 或 input 元素并传递 div 的 innerHTML 值以复制其内容。

假设我们有一个电子邮件 john_doe@gmail.com 及其关联图像 copyIcon.png

假设所有关联的电子邮件地址标签都包含一个唯一的 id，那么我们可以将该 id 传递给函数 copyEmail() 以复制内容。

function copyEmail(mail_id){
    var copyText = document.getElementById(mail_id).textContent;
    var textarea = document.createElement('textarea');
    textarea.id = 'tmp_elmnt';
    textarea.style.display = "none";
    document.body.appendChild(textarea);
    textarea.value = copyText;
    var selector = document.getElementById('tmp_elmnt');
    selector.select();
    document.execCommand('copy');
    alert("Copied mail : " + copyText);
    document.body.removeChild(textarea);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>click on Associated image to copy its respective email address</h3>
    <span id="mail1">john_doe@gmail.com</span><img src="copyIcon.png" alt="?" onclick="copyEmail('mail1')">
    <br>
    <span id="mail2">jane_doe@gmail.com</span><img src="copyIcon.png" alt="?" onclick="copyEmail('mail2')">
    <br>
    <span id="mail3">johnny_doe@gmail.com</span><img src="copyIcon.png" alt="?" onclick="copyEmail('mail3')">
    <br>
    <span id="mail4">jancy_doe@gmail.com</span><img src="copyIcon.png" alt="?" onclick="copyEmail('mail4')">

</body>
</html>