スウィートアラートボックス私は4つのボタンをワンクリックで追加できます。

スウィートアラートボックス1つのボタンが4つのボタンを追加します。同じボックスと同じdivを指している4つのボタンは、クリックすると最初のボタンです。この問題を解決する方法がないので、ポップアップに2番目のボタンポップアップが表示されます。スウィートアラートボックス私は4つのボタンをワンクリックで追加できます。

JS：

document.querySelector('ul.examples li.input button').onclick = function(){ 
    swal({ 
     title: "An input!", 
     text: 'Write something interesting:', 
     type: 'input', 
     showCancelButton: true, 
     closeOnConfirm: false, 
     animation: "slide-from-top", 
     inputPlaceholder: "Write something", 
    }, 
    function(inputValue){ 
     if (inputValue === false) return false; 

     if (inputValue === "") { 
      swal.showInputError("You need to write something!"); 
      return false; 
     } 

     swal("Nice!", 'You wrote: ' + inputValue, "success"); 

    }); 
};

HTML：

<html> 
     <head> 
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> 

     </head> 
     <body> 

     <ul class="examples"> 
     <li class="input"> <div class="ui"> <button> 1 </button> </div> </li> <br> 
     <li class="input"> <div class="ui"> <button> 2 </button> </div> </li> <br> 
     <li class="input"> <div class="ui"> <button> 3 </button> </div> </li> <br> 
     <li class="input"> <div class="ui"> <button> 4 </button> </div> </li> <br> 
     </ul> 
     </body> 
    </html> 

<!-- end snippet -->

出典

2017-02-28 Lijo Mattathil

に従わなければならないのでは '最初の要素に一致するセレクタをセレクタquerySelector'。すべての '.ui'要素に' click'イベントをバインドするには、 '$（ '。examples .ui'）。click（function（e）{...}）; – Tushar

あなたはコード –

を書き換えてください私は解答を理解していない私に言った –

使用querySelectorAll。それは、すべての要素を返しますので、あなたのような返された値を超えるループは、

var buttons = document.querySelectorAll('ul.examples li.input button'); 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].onclick = function(){ 
 
\t swal({ 
 
\t \t title: "An input!", 
 
\t \t text: 'Write something interesting:', 
 
\t \t type: 'input', 
 
\t \t showCancelButton: true, 
 
\t \t closeOnConfirm: false, 
 
\t \t animation: "slide-from-top", 
 
\t \t inputPlaceholder: "Write something", 
 
\t }, 
 
\t function(inputValue){ 
 
\t \t if (inputValue === false) return false; 
 

 
\t \t if (inputValue === "") { 
 
\t \t \t swal.showInputError("You need to write something!"); 
 
\t \t \t return false; 
 
\t \t } 
 
    
 
\t \t swal("Nice!", 'You wrote: ' + inputValue, "success"); 
 

 
\t }); 
 
}; 
 
}

<html> 
 
<head> 
 

 
    
 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> 
 

 

 

 

 
</head> 
 

 
<body> 
 
    
 
<ul class="examples"> 
 

 

 
\t <li class="input"> <div class="ui"> <button> 1 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 2 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 3 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 4 </button> </div> </li> <br> 
 

 

 
\t 
 
</ul> 
 

 

 

 
</body> 
 
    
 
    
 
    
 

 
    
 
    
 
</html>

出典

2017-02-28 03:21:09

100％働いてくれてありがとう –

使用querySelectAllしてください。

Array.prototype.forEach.call(document.querySelectorAll('ul.examples li.input button'),function(button){ 
 
     
 
     button.onclick = function(){ 
 
      swal({ 
 
        title: "An input!", 
 
        text: 'Write something interesting:', 
 
        type: 'input', 
 
        showCancelButton: true, 
 
        closeOnConfirm: false, 
 
        animation: "slide-from-top", 
 
        inputPlaceholder: "Write something", 
 
       }, 
 
       function(inputValue){ 
 
        if (inputValue === false) return false; 
 

 
        if (inputValue === "") { 
 
         swal.showInputError("You need to write something!"); 
 
         return false; 
 
        } 
 

 
        swal("Nice!", 'You wrote: ' + inputValue, "success"); 
 

 
       }); 
 
     } 
 
    });

<html> 
 
<head> 
 

 
    
 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"> 
 

 

 

 

 
</head> 
 

 
<body> 
 
    
 
<ul class="examples"> 
 

 

 
\t <li class="input"> <div class="ui"> <button> 1 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 2 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 3 </button> </div> </li> <br> 
 
\t <li class="input"> <div class="ui"> <button> 4 </button> </div> </li> <br> 
 

 

 
\t 
 
</ul> 
 

 

 

 
</body> 
 
    
 
    
 
    
 

 
    
 
    
 
</html>

出典

2017-02-28 03:16:05

動作していますか？スニペットを実行してボタンをクリックして確認しましたか？ – Tushar

申し訳ありませんが、私は変更することを忘れてあなたのコードをコピーし、querySelectAllは、一意のものではなく、ノードのリストを返します。 –

スウィートアラートボックス私は4つのボタンをワンクリックで追加できます。

答えて

関連する問題