Question

Sweet Alert框我添加了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 -->

Answer 1

请使用querySelectAll。

＆＃13;

 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");

                });
        }
    });

＆＃13;

<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>

＆＃13;

Answer 2

使用querySelectorAll。因为它返回所有元素，所以你应该遍历返回的值，例如按照

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>

Sweet Alert盒子我添加4个按钮，一个按钮正在工作

2 个答案: