甜蜜警報框我添加4個按鈕，只是一個按鈕正在工作

甜蜜警報框我只添加4個按鈕只有一個按鈕正在工作。 4個按鈕指向相同的盒子和相同的div問題是我們點擊時的第一個按鈕，彈出來的第二個按鈕彈出不來如何解決這個問題？甜蜜警報框我添加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'選擇器中的第一個元素匹配選擇。使用'$（'。examples .ui'）。click（function（e）{...}）;'在所有'.ui'元素上綁定'click'事件。 – 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個按鈕，只是一個按鈕正在工作

回答

相關問題