更改/添加HTML文本到按钮上单击多个按钮(相似)

Question

我正在创建带有文本"COPY CODE“的3-4优惠券按钮，当人们单击它时，它会复制优惠券，并将文本更改为”复制的< span>some “，持续2秒，然后更改回”复制代码“，单击后会再次更改。

我设法找到Javascripts来复制代码，但是更改文本的代码是重复的，我不能使用setTimeout()来实现我想要的2秒结果。

希望你能帮我一把。这是我的密码：

HTML

<p class="code" id="code10">OFF10</p>
<button onclick="copyToClipboard('#code10');changeText1()" id="button1">COPY CODE</button>

<p class="code" id="code20">OFF20</p>
<button onclick="copyToClipboard('#code20');changeText2()" id="button2">COPY CODE</button>

<p class="code" id="code35">OFF35</p>
<button onclick="copyToClipboard('#code35');changeText3()" id="button2">COPY CODE</button>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

function changeText1() {
  document.getElementById("button1").innerHTML = "COPIED!";
}
function changeText2() {
  document.getElementById("button2").innerHTML = "COPIED!";
}
function changeText3() {
  document.getElementById("button3").innerHTML = "COPIED!";
}

上面的脚本可以工作，但它们是重复的。然后我尝试了setTimeout()函数，但是它不是我所期望的，我知道我理解这个函数是错误的，我不熟悉Javascript，仅仅足够理解10%。这是我试过的剧本

function changeText1() {
  setTimeout(function() {
    document.getElementById("button1").innerHTML = "COPIED!";
  },2000)
}

Answer 1

这是最后的解决办法。你不能在每个按钮中点击事件就像简单和清晰

​

$(document).ready(function(){
  $('button').on('click', function(){
    var elem = $(this);
    var data_id = elem.attr('data-id');
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(elem.prev('div').find('#'+elem.attr('data-id')).text()).select();
    document.execCommand("copy");
    $temp.remove();
    changeText(elem);
  })
})

function changeText(elem) {
  $(elem).text('copied');
  changeBack(elem);
}

function changeBack(elem) {
  setTimeout(function() {
    $(elem).text('Copy Code');
  },2000)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div>
<p class="code" id="code10">OFF10</p>
</div>
<button data-id="code10" type="button">COPY CODE</button>

<div>
<p class="code" id="code20">OFF20</p>
</div>
<button type="button" data-id="code20">COPY CODE</button>
<div>
<p class="code" id="code35">OFF35</p>
</div>
<button type="button" data-id="code35">COPY CODE</button>

​

Answer 2

为您的文本更改找到了解决方案，参考此可复制文本。

​

function changeText(reed) {
  reed.innerHTML = "COPIED!";
  var reedText = reed.previousSibling;
  navigator.clipboard.writeText(reedText.textContent);
  setTimeout(function() {
    reed.innerHTML = "COPY CODE";
  }, 2000)
}

<p class="code" id="code10">OFF10</p>
<button onclick="changeText(this)" id="button1">COPY CODE</button>

<p class="code" id="code20">OFF20</p>
<button onclick="changeText(this)" id="button2">COPY CODE</button>

<p class="code" id="code35">OFF35</p>
<button onclick="changeText(this)" id="button2">COPY CODE</button>

​

Answer 3

您不必使用单独的函数来更改文本，因为当页面中有大量这些按钮时，这将是一个很大的痛苦。

这是我的解决方案：

HTML:-

<p class="code" id="code10">OFF10</p>
<button onclick="copyToClipboard('#code10', 'button1')" id="button1">COPY CODE</button>

<p class="code" id="code20">OFF20</p>
<button onclick="copyToClipboard('#code20', 'button2')" id="button2">COPY CODE</button>

<p class="code" id="code35">OFF35</p>
<button onclick="copyToClipboard('#code35', 'button3')" id="button3">COPY CODE</button>

Javascript:-

<script type="text/javascript">
    function copyToClipboard(element, button) {
        console.log($(element).text());
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();

        // waiting some time before changing the text
        setTimeout(function() {
          changeText(button);
        },2000);
    }

    function changeText(button) {
        document.getElementById(button).innerHTML = "COPIED!";
    }
</script>