使用Javascript - 提交文本字段，顯示事業部，隱藏所有其他

我有一個簡單的表格（文本字段和提交按鈕）。我正在嘗試讓用戶提交一個數字，結果數字將顯示一個div（來自一組div）。使用Javascript - 提交文本字段，顯示事業部，隱藏所有其他

我嘗試使用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之間，顯示出不同的股利，也許id爲paraEnd。

來源

2016-07-16 user3412194

請在jsFiddle看根據你的一個。我希望我已經完成了你想要的。我更改了showhide函數和您的HTML（修正了div的ID並增加了一個div#paraEnd）。我建議你重構你的代碼。

來源

2016-07-16 17:27:49

它看起來很棒。代碼如何修改以允許更多段落？我有142個條目......（不只是4個）。我假設第7行必須修改...... ['1'，'2'，'3'，'4']。 – user3412194

我試圖改變if語句是：如果（dividnum> = 142）{...但它沒有工作 – user3412194

@ user3412194請看[以下的jsfiddle（http://jsfiddle.net/LfzYc/438 /）我更新了代碼。 –

你應該使用jQuery有一個簡單的方法來操作DOM。使用jQuery我爲你一個例子，只是改變你的JS和粘貼礦山：

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

來源

2016-07-16 17:28:38

使用Javascript - 提交文本字段，顯示事業部，隱藏所有其他

回答

相關問題