Как изменить имя класса элемента <i>при клике, который вызывает две функции? - PullRequest
Новая
       7

Как изменить имя класса элемента <i>при клике, который вызывает две функции?

0 голосов
/ 02 апреля 2020

Я новичок в javascript. Я создал кнопку для копирования. На должен отображаться значок галочки после нажатия на кнопку . Код для «функция копирования» работает хорошо, но код для изменения значка после события щелчка не работает .

Будет несколько кнопок копирования, каждая из которых имеет уникальный Атрибут ID. Я хочу изменить «Значок копирования» на «Значок проверки» после нажатия. Я думаю, что простой способ состоит в том, чтобы изменить имя класса в

<i class="far fa-copy" id="classTest1"></i>

с (class = "far fa-copy") на (class = "fas fa-check"), но проблема в том, что функция changeClass не понимает, какой класс нажал кнопку, чтобы изменить класс. Код изменил класс всех элементов.

Также можно ли объединить 2 функции copyToClipboard(elementId) и changeClass() в 1 функцию?

Мой веб-сайт не может работать с jQuery, и я не знаю, что произойдет, я новичок ie.

Большое спасибо за вашу помощь. 

function copyToClipboard(elementId) {
 var aux = document.createElement("input");
 aux.setAttribute("value", document.getElementById(elementId).innerHTML);
 document.body.appendChild(aux);
 aux.select();
 document.execCommand("copy");
 document.body.removeChild(aux);
}

function changeClass(elementId) {
 var x = document.getElementById("elementId");
   x.className = "fas fa-check";
}
.copybutton {
cursor: pointer;
font-size: 14px;
color: #fff;
padding: 12px 10px;
text-decoration: none !important;
background: #333333;
background-color: rgb(51, 51, 51);
border: none;
transition: all .6s cubic-bezier(0.77,0,0.175,1);
}
.copybutton {
color:#ffffff;
}
.copybutton:hover {
background: #c2a693;
transition: all .6s cubic-bezier(0.77,0,0.175,1);
}
.copybutton:focus {
outline: 0;
}
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Finding HTML Elements by Tag Name</h2>

<div id="main">
<p>This example test.</p>
</div>

<div>
<h6 class="copy">Button 1: test 1 <span id="test1" style="display: none;">Test 1 copied</span> <button class="copybutton" onclick="copyToClipboard('test1');changeClass('classTest1')"><i class="far fa-copy" id="classTest1"></i></button></h6>
<h6 class="copy">Button 2: test 2 <span id="test2" style="display: none;">Test 2 copied</span> <button class="copybutton" onclick="copyToClipboard('test2');changeClass('classTest2')"><i class="far fa-copy" id="classTest2"></i></button></h6>
<p>Paste here: <input value="paste here for test copy function"></p>
</div>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 02 апреля 2020

Ваш код не может работать. Сначала вы должны использовать уникальные идентификаторы в вашем HTML: 

<h6 class="copy">Button 1: test 1 <span id="test1" style="display: none;">Test 1 copied</span> <button id="button2" class="copybutton" )"><i class="far fa-copy" id="classTest1"></i></button></h6>
<h6 class="copy">Button 2: test 2 <span id="test2" style="display: none;">Test 2 copied</span> <button id="button2" class="copybutton"><i class="far fa-copy" id="classTest2"></i></button></h6>

Конечно, вы можете объединить различные действия в один вызов функции. Для удобочитаемости вашего кода и возможности повторного использования держите разные функции отдельно и вызывайте их в clickkevent. Пример: 

/* This ensures that all elements are in DOM = ready */
if (document.readyState!="loading") docReady();
/* Modern browsers */
else document.addEventListener("DOMContentLoaded", docReady);
function docReady() {
   // Since both elements are the same except for the ids we do it in a loop
    for(var i = 1; i <= 2; i++) {  
      var clickElement = "button" + i;
       document.getElementById(clickElement).addEventListener("click", function(event){  // This is the function which is called when the button is clicked
         copyToClipboard("test" + i); // since per button we want to hand over the related id
         changeClass("classTest"+i);
       });
     }
}

function copyToClipboard(elementId) {
 var aux = document.createElement("input");
 aux.setAttribute("value", document.getElementById(elementId).innerHTML);
 document.body.appendChild(aux);
 aux.select();
 document.execCommand("copy");
 document.body.removeChild(aux);
}

function changeClass(elementId) {
 var x = document.getElementById("elementId");
 x.className = "fas fa-check"; // look into classList.add/ classList.remove
}

Я намеренно расширил ваш код в соответствии с вашим вопросом (устраняя ошибку двойного идентификатора в вашем html), конечно, есть возможности для улучшения, но вы сами написали рабочий код. Так что похлопайте себя по спине и гордитесь своей работой.

0 голосов
/ 02 апреля 2020

На самом деле вы можете сделать это двумя способами, первый, как вы сделали, но я изменил код, вы можете добавить столько элементов span для тестирования, мой код является динамическим c не волнуйтесь

Solution1 

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Clipboard</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    button {
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      padding: 12px 10px;
      background-color: rgb(51, 51, 51);
      border: none;
      padding: 5px;
      border-radius: 40%;
    }

    button:hover {
      background: #c2a693;
      transition: all .6s cubic-bezier(0.77,0,0.175,1);
    }

    button:focus {
      outline: 0;
    }

    span {
      display: none;
    }

    input {
      width: 200px;
      padding-left: 10px;
    }
  </style>
</head>
<body>

  <h2>Finding HTML Elements by Tag Name</h2>
  <p>This example test.</p>

  <div id="container">
    <h6 >Button 1: test 1 <span>Test 1 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 2: test 2 <span>Test 2 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 3: test 3 <span>Test 3 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 4: test 4 <span>Test 4 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 5: test 5 <span>Test 5 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <p>Paste here: <input placeholder="paste here for test copy function"></p>
  </div>

  <script>
    document.querySelector("#container").onclick = function(e) { 
      if(e.target.nodeName === "I") {
        var tmpInput = document.createElement("input");
        document.body.appendChild(tmpInput);
        tmpInput.value = e.target.parentElement.previousElementSibling.innerText;
        tmpInput.select();
        document.execCommand("copy");
        document.querySelectorAll("i").forEach(function(element) {
          element.className = "fa fa-copy";
        });
        e.target.className = "fa fa-check";
        document.body.removeChild(tmpInput);
      }
    }
  </script>
</body>
</html>

Solution2 отредактировано для тайм-аута 2 секунды и селекторов 

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Clipboard</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    button {
      cursor: pointer;
      font-size: 14px;
      color: #fff;
      padding: 12px 10px;
      background-color: rgb(51, 51, 51);
      border: none;
      padding: 5px;
      border-radius: 40%;
    }

    button:hover {
      background: #c2a693;
      transition: all .6s cubic-bezier(0.77,0,0.175,1);
    }

    button:focus {
      outline: 0;
    }

    span {
      display: none;
    }

    input {
      width: 200px;
      padding-left: 10px;
    }
  </style>
</head>
<body>

  <h2>Finding HTML Elements by Tag Name</h2>
  <p>This example test.</p>

  <div id="container">
    <h6 >Button 1: test 1 <span>Test 1 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 2: test 2 <span>Test 2 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 3: test 3 <span>Test 3 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 4: test 4 <span>Test 4 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <h6 >Button 5: test 5 <span>Test 5 copied</span><button><i class="fa fa-copy"></i></button></h6>
    <p>Paste here: <input placeholder="paste here for test copy function"></p>
  </div>

  <div>
    <button><i class="fa fa-copy"></i></button>
    <button><i class="fa fa-check"></i></button>
    <button><i class="fa fa-address-card"></i></button>
    <button><i class="fa fa-warning"></i></button>
    <button><i class="fa fa-wifi"></i></button>
  </div>

  <script>
    var copiedText = "", clickedElement, currentTask;
    document.querySelector("#container").onclick = function(e) { 
      if(e.target.nodeName === "I") {
        copiedText = e.target.parentElement.previousElementSibling.innerText;
        document.execCommand("copy");
        document.querySelectorAll("#container i").forEach(function(element) {
          element.className = "fa fa-copy";
        });
        e.target.className = "fa fa-check";
        clickedElement = e.target;
      }
    }

    document.body.oncopy = function(e) {
      event.clipboardData.setData('text/plain', copiedText);
      event.preventDefault();
      clearTimeout(currentTask);
      currentTask = setTimeout(function() {
        clickedElement.className = "fa fa-copy";
      }, 2000);
    };
  </script>
</body>
</html>
0 голосов
/ 02 апреля 2020

В качестве временного решения я могу предложить вам это 

function someFunc(test, classTest) {
 copyToClipboard(test);
 changeClass(classTest);
}

И добавить эту функцию по щелчку. 

<h6 class="copy">Button 1: test 1 <span id="test1" style="display: none;">Test 1 copied</span> <button class="copybutton" onclick="someFunc('test1', 'classTest1')"><i class="far fa-copy" id="classTest1"></i></button></h6>

Если вы хотите объединить несколько функций для одного элемента, используйте addEventListener('${action}', callbackFunction) Вы можете узнать больше об этом здесь https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Также не используйте один и тот же идентификатор для разных элементов, как вы использовали для пролетов. Идентификатор всегда должен быть уникальным.

...