Question

我在JavaScript和HTML中为我的数组添加了2个元素，我想将一个副本添加到剪贴板按钮作为每个数组的新元素，但由于代码复杂，我很难做到这一点。这是我的代码

＆＃13;

var currImage = 0;
window.onload = () => {
    const factsArr = [
	{ image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",},
	{ image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',      source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"},
  ]:
  const swtch = () => {
    document.getElementsByClassName('image')[0].setAttribute('src', factsArr[currImage].image);
    document.getElementsByClassName('source')[0].innerHTML=factsArr[currImage].source;
	document.getElementById('copyToClipboard').innerHTML=copyToClipboard(element).copyToClipboard
    currImage++;
    if (currImage == factsArr.length)
        currImage = 0;
    console.log(currImage);
};
document.getElementsByClassName('generate-btn')[0].addEventListener('click', swtch);
document.getElementsByClassName('source')[0].addEventListener('click', swtch);
}
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="generate-btn">Amazing Fact Button</button>
<div class="source"></div>
<img class="image" />
<button onclick="copyToClipboard('element')">Copy Link</button>

＆＃13;

Answer 1

var currImage = 0;
window.onload = () => {
    const factsArr = [
  { image:'https://media.giphy.com/media/3o7aD5tv1ogNBtDhDi/giphy.gif', source:"<a href='http://news.nationalgeographic.com/news/2010/03/100315-half-male-half-female-chickens/' style='text-decoration:none;color:#FFFFFF;' target='_blank'>know more</a>",},
  { image:'https://media.giphy.com/media/1nkUav308CBws/giphy.gif',      source:"<a href='http://www.guinnessworldrecords.com/world-records/most-expensive-pizza' style='text-decoration:none;color:#FFFFFF;'target='_blank'>know more</a>"},
  ];
  const swtch = () => {
    $('.image').attr('src', factsArr[currImage].image);
    $('.source').html(factsArr[currImage].source);
    $('.copyToClipboard').data('test',factsArr[currImage].image);
    $('.test').css('display', 'block');
    currImage++;
    if (currImage == factsArr.length)
        currImage = 0;
    console.log(currImage);
};
$('.generate-btn').on('click', swtch);
$('.source').on('click', swtch);
}
function copyToClipboard() {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($('.copyToClipboard').data('test')).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="generate-btn">Amazing Fact Button</button>
<div  class="test" style="display:none;">
<div class="source"></div>
<img class="image" />
<button class="copyToClipboard" onclick="copyToClipboard()">Copy Link</button>
</div>

如何在JavaScript

1 个答案: