動態地添加（顯示/隱藏文本），並單擊時顯示/隱藏下面的字段集

Question

我想附加（顯示/隱藏文本）動態到一個跨度，當點擊該特定文本時，我想要顯示/隱藏效果在下面的字段集。 我完成了顯示/隱藏附加到span的文本任務。但是當我點擊該文本時出現問題。除了跨度旁邊的文本被改變之外沒有任何反應。

HTML：

<span>Store Dropdown</span> 
<fieldset id="fieldset-store" class="showHide"> 
    <legend>Choose by item:</legend> 
    <label for="prodtype">Type:</label> 
    <select name="prodtype" id="prodtype"> 
     <option value="0" selected="selected">Choose type</option>     
     <option value="1"> Sample1</option> 
     <option value="2"> Sample2</option> 
     <option value="3"> Sample3</option> 
     <option value="4"> Sample4</option> 
    </select> 
    <label for="brandtype">of:</label> 
    <select name="brandtype" id="brandtype">     
     <option value="0" selected="selected">Choose brand</option>     
     <option value="1"> Brand1</option> 
     <option value="2"> Brand2</option> 
     <option value="3"> Brand3</option> 
     <option value="4"> Brand4</option> 
    </select> 
    <label for="prodprice">Price:</label> <input id="prodprice" name="prodprice" value="" type="text"> 
</fieldset> 

JS代碼：

$(document).ready(function(){ 
    $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>'); 
    $(".showHide").hide(); 
    $('a.showHideLink').click(function() { 
     if ($(this).html()=='Show') 
      $(this).html('Hide'); 
     else 
      $(this).html('Show'); 
     $(this).next().toggle('slow'); 
     return false; 
    }); 
}); 

PLS建議我什麼樣的變化，我需要做。在此先感謝

Answer 1

$(document).ready(function(){ 
      $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>'); 
      $(".showHide").hide(); 
      $('a.showHideLink').click(function() { 
       if ($(this).html()=='Show') 
         $(this).html('Hide'); 
       else 
         $(this).html('Show'); 
       $(".showHide").toggle('slow'); 
       return false; 
      }); 
     }); 

或

$(document).ready(function(){ 
       $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>'); 
       $(".showHide").hide(); 
       $('a.showHideLink').click(function() { 
        if ($(this).html()=='Show') 
          $(this).html('Hide'); 
        else 
          $(this).html('Show'); 
        $(this).parent().next().toggle('slow'); 
        return false; 
       }); 
      });