用jQuery触发多个mailto链接

Question

我开始认为这甚至是不可能的，但是我正在尝试通过允许一次启动多封电子邮件来自动执行后端管理任务。

我与用户有一张桌子。 该表的最后一列有一个带mailto链接的下拉按钮，该链接向该行的用户发送各种电子邮件。 该列在按钮旁边还有一个复选框。 这是一个简化的代码段：

  <table>
    <tr>
      <td>
        User
      </td>
      <td>
        <div class="btn-group individual-btn">
          <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
            Email User
          <ul class="dropdown-menu">
            <li>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you open?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you click?
              </a>
              <a class="no-open" href="mailto:user?subject=why&body=etc">
                Why didn't you pay?
              </a>
          </ul>
        </div>
        <input type="checkbox" class="selected-row">
      </td>
    </tr>
    <tr>
      rinse and repeat...

在表的最后，我有一个按钮，该按钮具有相同的操作集，但是此按钮的想法是单击该按钮将为每个选定的用户打开一封电子邮件（如复选框所示）。

    <div class="btn-group master-btn">
      <a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
        Email All Checked Users
      <ul class="dropdown-menu">
        <li class="email-items">
          <a class="no-open" href="#">
            Why didn't you open?
          </a>
          <a class="no-open" href="#">
            Why didn't you click?
          </a>
          <a class="no-open" href="#">
            Why didn't you pay?
          </a>
      </ul>
    </div>

我认为js可能很简单：

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
      e.preventDefault();
    });

但这只会为第一行打开一封电子邮件。 因此，我认为，dom可能需要在这些点击之间留出空间，因此我将遍历每个点击并延迟模拟点击； 但结果相同：仅通过电子邮件发送第一行：

    $(".master-btn .email-items a").click(function(e){
      linkClass = "a." + $(this).attr("class").trim()
      $(".selected-row:checked").each(function(i){
        var self = this
        setTimeout(function(){
          $(self).prev(".individual-btn").find(linkClass)[0].click();
        }, 2000*i);
      });
      e.preventDefault();
    });

有什么想法吗？ 浏览器会允许吗？

Answer 1

我认为这是解决方法：

$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
    $(this)[0].click();
});

在jQuery对象上使用[0]时，它仅返回集合中的第一个DOM元素，等效于.get(0) 。 如果要包含所有DOM元素的数组，则必须使用.get() （不带任何参数，它将返回所有元素）。

Answer 2

工作示例： https : //jsfiddle.net/gaboom/h81qov5g/

 $("#send").on("click", function(event) { event.preventDefault(); $("#iframes").empty(); $("#links a").each(function() { setTimeout($.proxy(function() { var popup = window.open($(this).attr("href")) setTimeout($.proxy(function() { this.close(); }, popup), 100); }, this), 100) }) }) 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a id="send" href="#">CLICK TO SEND</a> <div id="links" class="hidden"> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> <a href="mailto:john@example.com">John</a> <a href="mailto:sarah@example.com">Sarah</a> </div>