javascript - div からメールを送信する関数を作成する

Question

メールアイコンのあるdivがいくつかあります。

<div class="icon-send-mail" id="test1@email.com"></div>
<div class="icon-send-mail" id="test2@email.com"></div>
<div class="icon-send-mail" id="test3@email.com"></div>

ユーザーがそのアイコンをクリックしたときにメールを送信したい。

$( document ).ready( function() {
    $('.icon-send-mail').click(function(email) {
      var mailto_link = 'mailto:'+email;
      var win = window.open(mailto_link,'emailWindow');
    });
});

これはどのように行うことができますか？

Answer 1

関数内の最初の行を編集します。

/* You were passing the event object! */
var mailto_link = 'mailto:'+this.id;

---

カスタム JQuery と JavaScript のパフォーマンス ベンチマーク

JavaScript/JQuery

$(document).ready(function(){
    $('.icon-send-mail').click(function(event) {
      var mailto_link = 'mailto:'+this.id;
      var win = window.open(mailto_link,'emailWindow');
    });
});

---

ピュア Javascript

window.onload = function () {
    var elems = document.getElementsByClassName('icon-send-mail');
    for (var i in elems) {
        if (elems[i].nodeType == 1) elems[i].addEventListener('click', function (event) {
            var mailto_link = 'mailto:' + this.id;
            var win = window.open(mailto_link, 'emailWindow');
        });
    }
};

ボーナスCSS

.icon-send-mail {
    cursor: pointer;
}

ライブデモ

Answer 2

クリック ハンドラーへの入力は、イベント オブジェクトです。そのイベントオブジェクト内で、クリックされた要素を取得できるため、IDです。この場合、メールアドレスを保持します

$('.icon-send-mail').click(function(event) {
  var mailto_link = 'mailto:'+event.target.id;
  var win = window.open(mailto_link,'emailWindow');
});

Answer 3

この行を置き換える必要があります。

var mailto_link = 'mailto:'+email;

次の行で：

var mailto_link = 'mailto:'+($(this).attr('id'));