甜蜜的警报盒我添加4个按钮，一个按钮正在工作

甜蜜警报框我添加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。因为它返回所有元素，所以您应该循环循环返回的值，例如collow

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>

请使用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">
	<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>

相关内容

最新更新

热门标签：