Question

我有多个具有相同类名的元素，并希望它们执行相同的javascript函数，但输出特定于其的唯一“ inner.Text” 到我点击的元素。现在我知道我需要一个[索引]和一个循环但由于我是javascript新手，所以我暂时不知道该如何实现。

花了3个小时来弄清楚

const myButton = document.querySelectorAll('.clipboard-icon');
const myInp = document.querySelectorAll('.snippetcode');
myButton.forEach(ree =>
  ree.addEventListener('click', copyElementText));

function copyElementText(id) {
  var text = myInp.innerText;
  var elem = document.createElement("textarea");
  document.body.appendChild(elem);
  elem.value = text;
  elem.select();
  document.execCommand("copy");
  document.body.removeChild(elem);
  console.log('clicked');
}

console.log(myButton);
console.log(myInp);
/*everything works fine  if the script was changed to affect only ONE class name but I cant figure out how to make them work for more than one 

*/

.snippet1 {
  border: solid rgb(55, 63, 184) 3px;
}

.snippet_holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 3.5rem;
  margin: 0 0 1rem 0;
  position: relative;
}

.buttons {
  width: 170px;
  height: 40px;
  border: 0;
  padding: 0;
  font-size: 1rem;
  color: #fff;
  border-radius: 10px;
}

.snippet_holder:hover .clipboard-icon {
  display: block;
  position: absolute;
  top: 15px;
  right: 65px;
  background: rgb(51, 153, 136);
  margin: 0;
  width: 30px;
  padding: 0;
  height: 30px;
}

.clipboard-icon {
  display: none;
}

.clipboard-icon img {
  width: inherit;
  height: inherit;
  position: relative;
}

.clipboard-icon pre {
  display: none;
}

.snippetcode1 {
  display: none;
}

.button1 {
  -webkit-animation: rainbow 6.5s ease infinite;
  animation: rainbow 6.5s ease infinite;
  background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc);
  background-size: 800% 800%;
}

@keyframes rainbow {
  0% {
    background-position: 1% 80%;
  }
  50% {
    background-position: 99% 20%;
  }
  100% {
    background-position: 1% 80%;
  }
  0% {
    background-position: 1% 80%;
  }
  50% {
    background-position: 99% 20%;
  }
  100% {
    background-position: 1% 80%;
  }
}

main {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<html>

<body>
  <main>
    <div class="snippet_holder snippet_holder1">
      <div class="clipboard-icon">
        <pre>
                               <code class= "snippetcode">
                        1st class text copieddddd
                               </code>
                             </pre>
        <img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
      </div>
      <button type="button" class="buttons button1">button</button>

    </div>

    <div class="snippet_holder snippet_holder1">

      <div class="clipboard-icon">
        <pre>
           <code class= "snippetcode">
            22222nddd class text copieddddd
           </code>
        </pre>
        <img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
      </div>
      <button type="button" class="buttons button1">button</button>

    </div>

    <div class="snippet_holder snippet_holder1">

      <div class="clipboard-icon">
        <pre>
                                      <code class= "snippetcode">
                                       3rd class text copieddddd
                                      </code>
                                    </pre>
        <img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
      </div>
      <button type="button" class="buttons button1">button</button>

    </div>

    <div class="snippet_holder snippet_holder1">

      <div class="clipboard-icon">
        <pre>
                                      <code class= "snippetcode">
                                       4thhhhhhhhclass text copieddddd
                                      </code>
                                    </pre>
        <img src="https://www.shareicon.net/data/128x128/2016/04/27/756265_clipboard_512x512.png">
      </div>
      <button type="button" class="buttons button1">button</button>

    </div>

  </main>

</body>

</html>

Answer 1

您必须查询与按下的按钮相关的export class AdminAuthGuard extends AuthGuard('admin') { canActivate(context: ExecutionContext) { // add your custom authentication logic here. return super.canActivate(context); } handleRequest(err, user, info) { if (err || !user) { throw err || new UnauthorizedException(); } return user; } }，因此，查询nodeList .snippetcode毫无意义，您可以使用myInp访问正确的元素currentTarget对象中提供的...

event

如何给具有相同类名的元素在javascript中执行相同的功能？

1 个答案: