Javascript - テキストフィールドを送信する、Divを表示する、その他すべてを非表示

Question

私は単純なフォーム（テキストフィールドと送信ボタン）を持っています。私はユーザーに番号を提出させようとしており、結果の数字には1つのdiv（divのセットから）が表示されます。

this exampleをベースとして試してみました（ユーザーがリンクをクリックすると、divを表示し、他のユーザーを非表示にします）。

私のテストは以下の通りです：

var divState = {}; 

function showhide(oFrm) { 
    var dividnum = oFrm.Inputed.value; 
    var prepar = "para"; 
    var divid = prepar + theInput; /* should result in something like "para52" */ 


    divState[divid] = (divState[divid]) ? false : true; 
    //close others 
    for (var div in divState){ 
     if (divState[div] && div != divid){ 
      document.getElementById(div).style.display = 'none'; 
      divState[div] = false; 
     } 
    } 

    divid.style.display = (divid.style.display == 'block' ? 'none' : 'block'); 
} 

http://jsfiddle.net/LfzYc/431/

注：私は全くJavaScriptで堪能ないです、私は難しさを持っています理由です。

また、関数を追加したいと思います...入力された数字が1-4の間でない場合は別のdivを表示してください。おそらくidはparaEndです。

Answer 1

jsFiddleを参考にしてください。私はあなたがしたいことをやったことを願っています。私はshowhide関数とあなたのHTMLを修正しました（divのIDを固定し、もう1つをdiv#paraEndと追加しました）。あなたのコードをリファクタリングすることをお勧めします。

Answer 2

DOMを簡単に操作するには、jQueryを使用する必要があります。 ちょうどあなたのJSを変更して、ペースト鉱山、私はあなたのための一例を作ったのjQueryを使用した：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    (function ($) { 

     // get the paragraphs 
     var paragraphs = $('.paragraph'); 

     // form submit 
     $('#paragraphform').submit(function (e) { 
      // prevent the event to flow 
      e.preventDefault(); 

      // get the input value 
      var value = $('#Inputed').val() - 1; 

      // reset all divs removing active css class 
      paragraphs.removeClass('active'); 
      $('.error').removeClass('active'); 

      // verify if the value doens't exist 
      if(value < 0 || value > paragraphs.length - 1) { 
       $('.error').addClass('active'); 
       return; 
      } 

      // show the active div 
      paragraphs.eq(value).addClass('active'); 
     }); 

    })(jQuery); 

</script> 

は、あなたが何を必要とすることですか？

jQueryを使って、あなた慣れていない場合は、これはjqueryの学習センターにある： https://learn.jquery.com/

そして、これは初心者のための素晴らしいチュートリアルです：それは素晴らしいですね http://www.tutorialspoint.com/jquery/