2017-08-21 13 views
0

コードが編集されました。不完全な最初のコードについて謝罪します 私はこのコードをユーザから受け取り、その入力に一致する画像を追加します。私がしたいのは、他のボタンが押されていると、別の画像を追加するために異なるボタン(200 aprox。)を設定することです。私がこれに取り組んでいるのは、最初のスイッチケース内でif( "#id")。length条件で最初のifをターゲットにすることです。 これは私のコードの短い例です:Javascript if - elseスイッチを使用している場合( "#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(""); 
    } 

} 
} 

、それが画像を示しているが、 2番目のボタンを押すと、else-ifは決して動作しません。私は間違って何をしていますか?

+1

あなたが 'test()'関数から '}'を見逃しているように見えます...コンソールにエラーがありますか? – ochi

+1

まず、 '(("#1 ")。length)'は決して働いてはいけません。あなたは要素をターゲットにする '$'を持っていません – karthikr

+0

あなたのJavaScriptコードは不完全です。 [**最小、完全で検証可能な例**](http://stackoverflow.com/help/mcve)を提供するために質問を更新できますか?半機能コードの問題を解決するのは難しいです。あなたの問題を解決するためにこれまでに試したことをお聞かせください。詳細については、[**よくある質問をどうやるか**](http://stackoverflow.com/help/how-to-ask)に関するヘルプ記事を参照して、サイトの[**ツアー –

答えて

1

まあ、私は私の人生のためにあなたは、このコードで何をしようとして把握が、ここでの作業バージョンであることができない...

$(document).ready(function() { 
 
    var str; 
 
    $("#1, #2").click(function() { test(this); }); 
 
}); 
 
var input = ['a','b','c']; 
 
function test(caller) { 
 
    var interval = setInterval(match, 1); 
 
\t 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") { 
 
      \t $("div").append(imgs[0]); 
 
       i++; 
 
       break;  
 
      } else if (caller.id == "2") { 
 
       $("div").append(imgs[1]); 
 
       i++; 
 
       break; 
 
      } 
 
     case input[1]: 
 
      if (caller.id == "1") { 
 
      \t $("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>

+0

に行くと思う。本当に助けに感謝します。私のupvoteを投げるだろうが、私はまだできません。 –

+0

私は正しい答えとしてマークすることができるはずだと思います。実際に – Momus

+0

です。どうもありがとうございました –

関連する問題