While 循环中的动态 Div 标记

Question

我有一个 while 循环，它使用 PHP.

填充 4 个 div 选项卡（在一个父 div 中）

我还有一个复制到剪贴板的脚本，用于从 P 标签复制文本。不幸的是，此功能仅在标签和按钮具有唯一 ID 时才有效。

所以我的问题是：如何为我的循环 P 标签分配顺序 ID？从某种意义上说，我希望第一个填充的 div 中的第一组选项卡具有 ID 1、2、3、4，而下一个具有 5、6、7、8...等等.

这是 PHP 循环中的 HTML：

<div id='content' class='tab-content'>
   <div id='navpills-1' class='tab-pane active'>
      <p id='text'>Text to be copied to clipboard.</p>
      <button id='jsbtn' class='btn jsbtn' onclick='copyToClipboard('p#text')'>Copy</button>
   </div>
</div>

这是我用来将文本从 P 标签复制到剪贴板的脚本：

<script>
    function copyToClipboard(element) {
      var $temp = $("<textarea>");
      var brRegex = /<br\s*[\/]?>/gi;
      $("body").append($temp);
      $temp.val($(element).html().replace(brRegex, "\r\n")).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

Answer 1

如果您不打算使用 jQuery，那么您可以使用一些相当基本的香草 Javascript 轻松实现您的目标。 Clipboard API 提供了将文本（和其他内容）复制到系统剪贴板和从系统剪贴板复制文本的现代解决方案。

一般来说，使用 ID 会很麻烦，因为它们需要在 DOM 中是唯一的，因此如果需要将相同的功能应用于多个 it 项目，您必须尝试做您最初希望做的事情do - 分配顺序 ID 或其他一些此类解决方案，并在函数调用中引用该 ID。这不能很好地扩展，并且存在更好的选择。

以下任何地方都没有使用 ID 属性 - 相反，分配给每个按钮的事件处理程序使用 event 来识别哪个元素被单击（调用处理程序）并且从该节点是可能的，前提是您知道 DOM 结构，找到其他感兴趣的节点。在下面的代码中，event.target 指的是按钮 - 从那里我们找到它的父级，从该父级我们找到特定的 P 元素，其内容将被复制。 @CBroe 建议的方法使用 jQuery 方法执行此操作——这是我不熟悉的方法。

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Basic Clipboard Copy Example</title>
    </head>
    <body>
        <div class='tab-content'>
           <div class='tab-pane active'>
              <p class='copy'>Text to be copied to clipboard.</p>
              <button class='btn jsbtn'>Copy</button>
           </div>
           <div class='tab-pane active'>
              <p class='copy'>Some other text to be copied to clipboard.</p>
              <button class='btn jsbtn'>Copy</button>
           </div>
           <div class='tab-pane active'>
              <p class='copy'>Guess what...more text and not an ID in sight</p>
              <button class='btn jsbtn'>Copy</button>
           </div>
           <div class='tab-pane active'>
              <p class='copy'>And the final Paragraph and final chapter and final word.</p>
              <button class='btn jsbtn'>Copy</button>
           </div>
        </div>
        
        <textarea cols=100 rows=10></textarea>
        
        <script>
            document.querySelectorAll('button.jsbtn').forEach( bttn=>bttn.addEventListener('click',e=>{

              const pttn=/<br\s*[\/]?>/gi;
              const paragraph=e.target.parentNode.querySelector('p.copy');
              const textarea=document.querySelector('textarea');

              // writeText copies text to the clipboard
              navigator.clipboard.writeText( paragraph.innerHTML.replace( pttn, String.fromCharCode( 10 ) ) )
                .then(
                  ()=>{
                    /* 
                       All good... and to illustrate reading this copied text... 
                       readText - reads from the clipboard
                    */
                    navigator.clipboard.readText()
                        .then( text=>{
                            textarea.value=text;
                        })
                  },
                  (e)=>{console.log( 'error: %s',e.message )}
                )
            }));
        </script>
    </body>
</html>

While 循环中的动态 Div 标记

Dynamic Div Tags in a While Loop

javascript

php

html

while-loop