如何編寫jQuery函數來顯示和隱藏窗體

-4

<input type="button" id="B1" onclick="return false;" value="Show" /> 
    <input type="button" id="B2" onclick="return false;" value="Show" /> 
    <input type="button" id="B3" onclick="return false;" value="Show" /> 
    <input type="button" id="B4" onclick="return false;" value="Show" /> 

    <p id="P1">This is a paragraph with little content.</p> 
    <p id="P2">This is another small paragraph.</p> 
    <p id="P3">This is a paragraph with little content.</p> 
    <p id="P4">This is another small paragraph.</p>

我想要一個jQUERY函數來執行下面的操作。如果我點擊B1按鈕，它應該顯示P1文本，並且B1按鈕文本應該更改爲隱藏，下次我點擊B1按鈕時，它應該隱藏P1文本並更改B1按鈕文本以顯示。 B2 P1，B3 P3，B4 P4也一樣。

來源

2014-09-05 user3202862

試試這個：使用jQuery Start With Selector和綁定點擊事件對於所有具有ID按鈕帶「B」和節目開始/隱藏相應的段落。

$(function(){ 
    //hide all paragraph 
    $('p[id^=P]').hide(); 
    $('input[id^=B]').click(function(){ 
    var index = $(this).attr('id').replace('B',''); 
    var lable = $(this).val()=="Show"?"Hide":"Show"; 
    $(this).val(lable); 
    if(lable=="Show") 
     $('#P'+index).hide(); 
    else 
     $('#P'+index).show(); 
    }); 
});

Demo JSFiddle

來源

2014-09-05 11:51:48

我需要改變我的意思是如何調用該函數 – user3202862 2014-09-05 12:12:41

你只需要包括jQuery庫和HTML的標題部分上面放裏面的代碼''。 – 2014-09-05 12:22:53

見[此]（http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide），在代碼段jquery.min.js包括和的document.ready是內部的腳本。按照相同的。 – 2014-09-05 12:27:38

可以使用slideToggle功能和:visible選擇知道，如果DIV是開放與否：

<input type="button" id="B1" onclick="$('#P1').slideToggle();" value="Show" />

後，我讓你寫的功能;）

來源

2014-09-05 11:50:32

這是工作，但我要如何改變按鈕上的文字顯示和隱藏 – user3202862 2014-09-05 12:14:00

看的：可見選擇，你剛纔到，如果你的元素測試是可見=> $（「＃P1」）。is（「：visible」） – 2014-09-05 12:21:13

這是工作的罰款！對於我來說，你可以使用下面的代碼。

的JavaScript

<script src="js8/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#P1").hide(); 
     $("#P2").hide(); 
     $("#P3").hide(); 
     $("#P4").hide(); 
     $('input[id^=B]').click(function() { 
      var index = $(this).attr('id').replace('B', ''); 
      if ($(this).val() == "Show") { 
       $('#P' + index).show(); 
       $(this).val("Hide") 
      } 
      else { 
       $('#P' + index).hide(); 
       $(this).val("Show") 
      } 


     }); 
    }); 

</script>

來源

2014-09-05 12:09:29 prog1011

＃user3202862 - 如果答案是有用的，請點擊「正確的」，並給「給予好評」，所以它會幫助其他找出正確的解決方案。 – prog1011 2014-09-05 12:10:01

如何編寫jQuery函數來顯示和隱藏窗體

回答

相關問題