アトリビュートを使用したマルチアラートJavascript

私はマルチアラートを試みると、すべての結果が同じである（すべてのデータが "1"である）ことがわかります。クリックするとボタン番号1 =>警告にアトリビュートを使用したマルチアラートJavascript

：クリックすると、ボタンnumber2の=>警告に1
：クリックすると=>ボタンnumber3に2
警告：私が欲しい3

私は私の問題について、写真を添付

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>constructor-selector</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 
<body> 
 
    <!-- 1. Define some markup --> 
 
    <button class="btn" data-clipboard-text="1">Copy</button> 
 
    <button class="btn" data-clipboard-text="2">Copy</button> 
 
    <button class="btn" data-clipboard-text="3">Copy</button> 
 

 
    <!-- 2. Include library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="../dist/clipboard.min.js"></script> 
 

 
    <!-- 3. Instantiate clipboard by passing a string selector --> 
 

 
\t <script> 
 
\t var clipboard = new Clipboard('button'); 
 
\t 
 
\t clipboard.on('success', function(e) { 
 
\t \t console.log(e); 
 
\t \t var test = $(".btn").attr("data-clipboard-text"); 
 
\t \t alert (test + " : was copy on clipboard"); 
 
\t }); 
 

 
\t clipboard.on('error', function(e) { 
 
\t \t console.log(e); 
 
\t }); 
 
\t </script> 
 
</body> 
 
</html>

出典

2017-03-01 Joel

変更クリップボードがインスタンス化されるとcopyイベントが成功した後は、この行この

var test = e.text;

と

var test = $(".btn").attr("data-clipboard-text");

は、そのイベントのテキストe.textは、基本的にdata-clipboard-textの値であり、クリックされたボタンの属性。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>constructor-selector</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 
<body> 
 
    <!-- 1. Define some markup --> 
 
    <button class="btn" data-clipboard-text="1">Copy</button> 
 
    <button class="btn" data-clipboard-text="2">Copy</button> 
 
    <button class="btn" data-clipboard-text="3">Copy</button> 
 

 

 
    <!-- 3. Instantiate clipboard by passing a string selector --> 
 

 
\t <script> 
 
    // instantiate Clipboard 
 
\t var clipboard = new Clipboard('button'); 
 
\t // once text is copied to clipboard 
 
\t clipboard.on('success', function(e) { 
 
     // event action "copy" 
 
     // event text "e.text" now has the value of data-clipboard-text attribute 
 
\t \t //console.log(e); 
 
\t \t var test = e.text; 
 
\t \t alert (test + " : was copy on clipboard"); 
 
\t }); 
 

 
\t clipboard.on('error', function(e) { 
 
\t \t console.log(e); 
 
\t }); 
 
\t </script> 
 
</body> 
 
</html>

出典

2017-03-01 07:24:45

horrayを！ありがとうございます：* – Joel

あなたは5分で回答を受け入れることができます – Joel

このコードはなぜOPに役立つのか、いくつかの説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[このメタ質問とその回答]（http://meta.stackoverflow.com/q/256359/215552）を参照してください。 –

これを試してみてください：

var clipboard = new Clipboard('.btn'); 
 
\t 
 
\t clipboard.on('success', function(e) { 
 
\t \t console.log(e); 
 
\t \t var test = e.text; 
 
\t \t alert (test + " : was copy on clipboard"); 
 
\t }); 
 

 
\t clipboard.on('error', function(e) { 
 
\t \t console.log(e); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script> 
 
<button class="btn" data-clipboard-text="1">Copy</button> 
 
<button class="btn" data-clipboard-text="2">Copy</button> 
 
<button class="btn" data-clipboard-text="3">Copy</button>

出典

2017-03-01 07:25:52 vatz88

ありがとう、私はanwserを持っている：* – Joel

誰かがそれを既に投稿したのを見なかった： '） – vatz88

アトリビュートを使用したマルチアラートJavascript

答えて

関連する問題