甜蜜警报框我添加了 4 个按钮，只有一个按钮可以工作。 4个按钮指向同一个框和同一个div，问题是当我们点击第一个按钮时，弹出窗口出现，第二个按钮弹出窗口不出现，如何解决这个问题？
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 -->
最佳答案
使用querySelectorAll。 因为它返回所有元素，所以你应该循环返回的值，如 follow
var buttons = document.querySelectorAll('ul.examples li.input button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].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">
<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>关于javascript - Sweet Alert 框我添加了 4 个按钮，只有一个按钮可以工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42499460/