Question

代码已编辑。为不完整的第一个代码道歉 我有这个代码从用户那里获取输入，并附加一个匹配该输入的图像。我想要做的是设置不同的按钮（200 aprox。），如果按下其他按钮，则附加不同的图像。接近我正在为此做的是在第一个开关情况下，使用（“#id”）长度条件来定位第一个。这是我的代码的一个简短示例：

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工作，它显示图像，但如果我按下第二个按钮，否则 - 如果永远不会工作。我做错了什么？

Answer 1

嗯，我不能为我的生活弄清楚你正在尝试用这段代码做什么，但这是一个有效的版本...

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript if - else if if switch switch using（“#id”）。length

1 个答案: