javascript - 动态函数和动态参数/自变量

Question

我有一个名为copyToClipboard()的函数。这需要一个名为 element 的参数。该函数通过定位元素的 id、选择并复制内容来复制元素的内容。

例如:

JS

/*
*  Copy to clipboard fn
*/
function copyToClipboard(element) {
  var $temp = $("<input>");  
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  var $tempval = $temp.val($(element).text());
  $temp.remove();  

  var $notif = $("<p>");
  $notif.attr("class","notif");
  $("body").append($notif);
  $notif.html('Copied content to clipboard!');
  setTimeout(function() {
      $notif.fadeOut();
      $notif.promise().done(function(){
        this.remove();
      });
  }, 400);
}

HTML:

<p id="p1">content of #p1</p>
<p> not me tho </p>
<p id="p2">content of #p2</p>   
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>

我正在尝试将其改进为动态生成按钮的函数。

到目前为止，我将上述函数集成到一个新函数中，迭代通过 ID/Class(本例中的 ID)找到的元素，使用 onclick 函数容器生成按钮的 vb 将迭代值作为参数/参数.

/*
* generate copy buttons fn
*/
function generateCopyButtons() {

  var links = document.getElementById('links').getElementsByTagName('p');
      for (var i = 0; i < links.length; i++) {
          var $link = links[i];
          var thisId = $($link).attr('id');     
              if( thisId && thisId !== "null" && thisId !== "undefined" ){                  
                  var $button = document.createElement('button'); // btn
                  $button.innerHTML = 'Copy ' + thisId; //btn text
                  var element = '#' + thisId; // # + id 
                // console.log(element); // works like i want, #p1, #p2

                //how do i pass the element into this function??
                $button.onclick = function(element) {
                    var $temp = $("<input>");                    
                    $temp.val($(element).text()).select();
                    document.execCommand("copy");
                    var $tempval = $temp.val($(element).text());
                    $("body").append($temp);
                    $temp.remove();

                var $notif = $("<p>");
                $notif.attr("class","notif");
                $("body").append($notif);
                $notif.html('Copied content to clipboard!');
                setTimeout(function() {
                    $notif.fadeOut();
                    $notif.promise().done(function(){
                      $notif.remove();
                    });
                }, 400);
            };
              $($link).prepend($button);              
              // $($thisHashId).remove();
          }
}

}
$(document).ready(function(){
  generateCopyButtons();
});

现在它没有显示错误并且不起作用。使用前面的按钮效果很好。

jsfiddle demonstrating problem

Answer 1

一个解决方案包括 2 个步骤。

首先获取全部<p> #links 内的节点并过滤掉那些没有id的。

var pNodes = document.querySelectorAll('#links p[id^="p"]');
pNodes.forEach(function(element){
    var button = document.createElement('button');

    [...] //add button text, etc..

    button.setAttribute('data-p',element.getAttribute('id') );
    element.insertAdjacentHtml('afterend', button);
});

删除不必要的代码的一个好方法是使用委托(delegate)。当您单击文档中的任何节点时，默认情况下事件会向上传播，这意味着<button>元素点击可以从它的父级监听 #links节点，这将通过删除 for 循环来减少代码量。

var node = document.getElementById("links");
node.addEventListener("click", function(e) {
    if(e.target && e.target.nodeName == "P") {
        //click event target is a <button> node
        //here e.target is the <button> DOM node
        //use e.target.getAttribute('data-p') to retrieve the <p>'s ID
    }
}

这解决了在每个按钮上附加监听器的需要，按钮生成可以在另一个脚本/函数中处理我不确定它是否适用于所有浏览器(IE)