![](/img/trans.png)
[英]javascript- if/else, for statements inside a switch statement
[英]Javascript if - else if inside switch using (“#id”).length
代码已编辑。 对于第一份代码不完整,我深表歉意,我收到了来自用户输入的代码,并附加了与该输入匹配的图像。 我想做的是设置其他按钮(大约200个)以在按下其他按钮时附加不同的图像。 我正在这样做的方法是在第一个开关的情况下,以(“ #id”)。length条件为目标。 这是我的代码的简短示例:
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
<section id="section">
<input id="input">
<button id="1"></button>
<button id="2"></button>
</section>
<div id="div"></div>
</body>
</html>
使用Javascript:
$(document).ready(function() {
var str;
$("#1, #2").click(function () { test(); });
});
var input = ['a','b','c'];
function test() {
var interval = setInterval(match, 1);
$("div").html("");
str = $("input").val().toLowerCase();
var i = 0;
function match() {
var imgs = ["<img src='https://1.bp.blogspot.com/-v2N2hPY33pc/V488gHu5aWI/AAAAAAAAHFM/loGVDK5OlGcft5UUz8-AHZjAd3E7OlZjACLcB/s1600/colorful-background-with-waves.jpg' alt='0'>",
"<img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/Widget_icon.png' alt='1'>"];
if (i < str.length) {
switch (str[i]) {
case input[0]:
if ($("#1").length){
$("div").append(imgs[0]);
i++;
break;
}else if ($("#2").length){
$("div").append(imgs[1]);
i++;
break;
}
}
else {
clearInterval(interval);
$("input").val("");
}
}
}
现在,我设法使if起作用,它会显示图像,但是如果按第二个按钮,则else(如果不起作用)。 我究竟做错了什么?
好吧,我一生无法弄清楚您要如何使用此代码,但这是它的有效版本...
$(document).ready(function() { var str; $("#1, #2").click(function () { test(this); }); }); var input = ['a','b','c']; function test(caller) { var interval = setInterval(match, 1); var i = 0; $("div").html(""); str = $("input").val().toLowerCase(); function match() { var imgs = ["<img src='https://1.bp.blogspot.com/-v2N2hPY33pc/V488gHu5aWI/AAAAAAAAHFM/loGVDK5OlGcft5UUz8-AHZjAd3E7OlZjACLcB/s1600/colorful-background-with-waves.jpg' alt='0'>","<img src='https://upload.wikimedia.org/wikipedia/commons/c/c8/Widget_icon.png' alt='1'>","<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/100px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg' alt='2'/>","<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Corythucha_ciliata.jpg/120px-Corythucha_ciliata.jpg' alt='3'/>"]; if (i < str.length) { switch (str[i]) { case input[0]: if (caller.id == "1") { $("div").append(imgs[0]); i++; break; } else if (caller.id == "2") { $("div").append(imgs[1]); i++; break; } case input[1]: if (caller.id == "1") { $("div").append(imgs[2]); i++; break; } else if (caller.id == "2") { $("div").append(imgs[3]); i++; break; } } } else { clearInterval(interval); $("input").val(""); } } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input"/> <button id="1">1</button> <button id="2">2</button> <div></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.