如何创建一个 HTML 按钮，单击该按钮时会单击多个 HTML 社交媒体按钮？

Question

所以我有一堆从各种社交媒体平台获得的 HTML 按钮。我想创建一个点击所有社交媒体关注的按钮，这样用户就可以在所有平台上关注而无需做太多工作。关于我如何做到这一点/要研究什么的任何想法？非常感谢您的宝贵时间！

这是我目前得到的：

<html>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/facebook/" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>

<a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false">Follow</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="youtube" data-layout="default" data-count="hidden"></div>


<iframe src="https://open.spotify.com/follow/1/?uri=spotify:artist:4O15NlyKLIASxsJ0PrXPfz&size=basic&theme=light&show-count=0" width="200" height="24" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe>

<button type="button" onclick="alert('placeholder')">Follow All Socials</button>

</body>

</html>

Answer 1

这是一个使用 jQuery 的例子；

$('button').click(function() {
  console.log($(this).text());
});
$('.trigger').click(function() {
  $('.click').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="trigger">Trigger clicks on the other buttons</button>
<br>
<br>
<button class="click">Button 1</button>
<br>
<button class="click">Button 2</button>
<br>
<button class="click">Button 3</button>
<br>
<button class="click">Button 4</button>

这是一个没有 jQuery 的例子：

function myFunction(x) {
  console.log(x.textContent);
}
function triggerFunction() {
  var click = document.getElementsByClassName('click');
  for (i=0;i<click.length;i++) {
    click[i].click();
  }
}

<button class="trigger" onclick="myFunction(this); triggerFunction()">Trigger clicks on the other buttons</button>
<br>
<br>
<button class="click" onclick="myFunction(this)">Button 1</button>
<br>
<button class="click" onclick="myFunction(this)">Button 2</button>
<br>
<button class="click" onclick="myFunction(this)">Button 3</button>
<br>
<button class="click" onclick="myFunction(this)">Button 4</button>