Vanilla JS版本

Question

我有一个wordpress网站，访客可以从前端添加帖子。

每个帖子中都有一些带有特定文本的<li>标签。 <li>标签之一具有电子邮件地址。看起来像这样<li class="E-mail">example@example.com</li>。每个帖子中都有作者的电子邮件地址，旁边是一个按钮，发送消息。当访客单击“发送”按钮时，将显示一个弹出窗口，其中包含以下字段：发送至，您的电子邮件，您的消息...我希望将作者的电子邮件地址从<li>自动添加到SEND弹出窗口中的“ TO”字段。

页面上有添加的帖子列表。每个帖子都在标签<article>中，每个文章标签都有一个ID。看起来像这样<article id="post-145">

在<article>标签内，有<ul>带有电子邮件地址。

请以下面的代码为例。我需要将电子邮件从li标签粘贴到弹出窗口中的输入标签。

   

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <li class="E-mail"> example@example.com — <a href="" class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to: <input type="text" value="example@example.com" /> Your e-mail: <input type="text" value="" /> Your message: <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>

如何使用JS或其他方法来实现它？

请帮忙。我正在寻找解决方案。

Answer 1

使用jQuery作为解决方案。步骤如下

使用功能从li标签中提取电子邮件ID
在弹出窗口的电子邮件ID字段中设置emailid

查看代码段。

function extractEmailId (text){
    return text.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
}


$('.popup-open-link').on("click", function(){
   var emailid = extractEmailId( $('.E-mail').text()).join('\n');
  $('#mailid').val( emailid );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <li class="E-mail"> example@example.com — <a href="#" class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to: <input type="text" value="example@example.com" id="mailid" /> Your e-mail: <input type="text" value="" /> Your message: <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>

Answer 2

借助Jquery和CSS，您可以使用以下代码来获取当前<li>的数据值。在html中，为每个<li>设置数据值，为文本框声明ID：

window.onload = function() {
    $(".popup-open-link").click(function() {
      txtSender.value = $(this).closest("li").attr('data-value');
    });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article id="post-145">
  <div class="aside">
    <ul>
      <li class="name">M1ark </li>
      <li class="phone-no">1911 </li>
      <li class="E-mail" data-value="1example@example.com">1example@example.com — <a class="popup-open-link">Send Message</a> </li>
    </ul>
    <ul>
      <li class="name">Mark </li>
      <li class="phone-no">911 </li>
      <li class="E-mail" data-value="example@example.com">example@example.com — <a class="popup-open-link">Send Message</a> </li>
    </ul>
  </div>
</article>

<div class="popup-window">
  <form>
    Send to:
    <input type="text" id="txtSender" value="" /> Your e-mail:
    <input type="text" value="" /> Your message:
    <input type="text" value="" />
    <input type="submit" value="SEND MESSAGE" />
  </form>
</div>

Answer 3

Vanilla JS版本

您不需要jQuery这样简单的东西。

通过评论包含答案的详细信息。

<article id="post-145">
  <div class="aside">

    <ul>
      <!-- BE SURE TO FIX YOUR `calss` TYPOS! -->
      <li class="name"> Mark </li>
      <li class="phone-no"> 911 </li>
      <!-- 
        Using `href="javascript:void(0)"` avoids unneccessary
        uncertainties when using an anchor tag for this purpose.
      -->
      <li class="E-mail"> example@example.com — 
        <a href="javascript:void(0)" class="popup-open-link">
          Send Message
        </a>
      </li>
    </ul>

  </div>
</article>

...

    <!--
    NOTE: 
      Corrected from `type="text"` to `type="email"`. 
      This will provide additional validation.

      Also added the correct `<label>` elements accordingly,
      and `name` properties. 

      It is best practice to manipulate and access DOM
      form inputs via the `name` property, not `id`.
    -->

    <label for="send-to">Send to:</label> 
    <input name="send-to" type="email" value=""/> 

    <label>Your e-mail:</label>
    <input type="email" value="" /> 

    <label>Your message:</label> 
    <input type="text" value="" />

    <input type="submit" value="SEND MESSAGE"/>

  </form>
</div>

...

<!-- 
  Other answers included waiting for a "onload" event. 
  This is unneccessary as long as you insert the script
  *after* the `<article>`.
-->
<script type="text/javascript">
/* 
  encapsulates the JavaScript to avoid bugs 
  via conflicting code.
*/
;(function () {

  function extractEmail (text) {
    var emailRegex = /([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi;
    return text.match(emailRegex)[0];
  }

  function populateMessageSendToFieldWithAuthorEmail () {
    var authorEmailListItem = document.querySelector('.E-mail');
    var messageForm = document.querySelector('.popup-window form');
    messageForm['send-to'].value = extractEmail(
      authorEmailListItem.innerText
    );
  }

  function addListenerToTriggerElement () {
    var triggerElement = document.querySelector('.popup-open-link');
    triggerElement.addEventListener(
      'click', 
      populateMessageSendToFieldWithAuthorEmail
    );
  }

  addListenerToTriggerElement();

})();
</script>

点击链接后，将电子邮件地址插入div的输入中

3 个答案:

Vanilla JS版本