繁体   English   中英

Javascript if-else if内部开关使用(“ #id”)。length

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM