如何使用 jquery 在 whatsapp 上共享 DIV 或 SPAN 的动态文本内容？

Question

我一直在尝试在 whatsapp 上分享 DIV 的文本内容。但是，还没有成功。我不想共享整个文档。我只想分享一部分（我只想分享showques的内容）

这是我的代码：

<body>
    <div id="showques" style="font-size: 48px;">
    </div>
    <div id="showans" style="font-size: 48px;">
    </div>
<a href="whatsapp://send?text=#showall" data-action="share/whatsapp/share"
    tyle="background-color: green; color: ivory;font-size: 48px;height:48px;width:500px">SHARE IN WHATSAPP</a>

showques 的值从以下代码更新：

<script>
function nxtRiddle() {
        var chooserdl = [];
        for (i = 0; i < 164; i++) {
            chooserdl.push(i);
        }
        console.log(chooserdl);
        var riddleno = chooserdl[Math.floor(Math.random() * chooserdl.length)];
        console.log(riddleno);
        $('#showques').append(riddleques[riddleno]);
        $('#showans').append(riddleans[riddleno]);
        return;
    }
    nxtRiddle(0);
</script>

Answer 1

首先需要获取DOM的题目内容。然后，您必须从 JS 触发 link 单击事件，并使用正确的 WhatsApp url 打开一个新选项卡。希望这会有所帮助。

document.getElementById("whatsAppShareButton").addEventListener('click', function(e) {
  e.preventDefault();
  var question = encodeURIComponent(document.getElementById("showques").textContent);
  window.open('whatsapp://send?text=' + question, '_blank');
});

<div id="showques" style="font-size: 48px;">
  This is a sample question...
</div>
<div id="showans" style="font-size: 48px;">
</div>
<a href="#" id="whatsAppShareButton" data-action="share/whatsapp/share" style="background-color: green; color: ivory;font-size: 48px;height:48px;width:500px">SHARE IN WHATSAPP</a>

Answer 2

这是我从 webflow 获得的代码。有效！

将此粘贴到页面的标记内：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

将此粘贴到标签中：

 <div class='divblock'>
This is the first line.
This is the second line.
</div>
    <button id='button'> WHATSAPP </button>

将此粘贴到 Before 标记中：

<script type="text/javascript">
(function clickMe() {
  const button = document.getElementById("button");
  var divblock = $('.divblock').text();
  button.addEventListener("click", event => {
    // Whatsapp Message on Button Click
    window.open("https://api.whatsapp.com/send?text=Show div text: " + divblock)
  });
})();
</script>

输出：

show div 文本：这是第一行。这是第二行。

如何使用 jquery 在 whatsapp 上共享 DIV 或 SPAN 的动态文本内容？

How to share dynamic text content of DIV or SPAN on whatsapp using jquery?

html

javascript

jquery

whatsapp

reactjs