クラスを表示/非表示にする

Question

みんな。

"onclick"にhrefリンクを使用して、非表示と非表示を切り替えるようにしています。私は、jQuery、JavaScript関数を使用してみましたが、私はそれが動作するように十分に知っているようではありません。私は近づいた。これは私が今持っているものである（私の8かそこらの試み）

Styles.cssを：

.noPhones{ 
    display: none; 
} 

ジャバスクリプト（contacts.tpl）：

{literal} 
<script type="text/javascript"> 
function swapMyToggledDiv() 
{ 
if(document.getElementById(".noPhones").style.display == "none") 
{ 
document.getElementById(".noPhones").style.display = "block"; 
} 
else 
{ 
document.getElementById(".noPhones").style.display = "none"; 
}</script> 
{/literal} 

マイフォーム（contacts.tpl） ：

 <tr><td> 
      <h2><a href="#" onclick="swapMyToggledDiv()">Phone</a></h2> 
     </td><td> 
      <input type="hidden" name="phone[contactId]" value="{$userData.contact_id}" /> 
      <input type="text" name="phone[tel]" size="25" value="{$userData.telTel}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Cell #</h2> 
     </td><td> 
      <input type="text" name="phone[cell]" size="25" value="{$userData.telCell}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Work #</h2> 
     </td><td> 
      <input type="text" name="phone[work]" size="25" value="{$userData.telWork}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Home #</h2> 
     </td><td> 
      <input type="text" name="phone[home]" size="25" value="{$userData.telHome}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Pager #</h2> 
     </td><td> 
      <input type="text" name="phone[pager]" size="25" value="{$userData.telPager}" /> 
     </td></tr> 

     <tr class="noPhones"><td> 
      <h2>Fax</h2> 
     </td><td> 
      <input type="text" name="phone[fax]" size="25" value="{$userData.telFax}" /> 
     </td></tr> 

リンクをクリックするまで「noPhones」クラスを非表示にする必要があります。

ご協力いただければ幸いです！

ありがとうございます！

Answer 1

は簡単ではありません属性を持つことはできません：あなたはあなたにIDを適用した場合

function swapMyToggledDiv() 
{ 
    $(".noPhones").toggle(); 
} 

このアクションをjQuery onreadyメソッドで適用することができます。

$(function() { 
    $("#toggle_link").click(function() { 
     $(".noPhones").toggle(); 
    }); 
}); 

Answer 2

、あなたがIDを与える必要がdocument.getElementById(".noPhones")

はjQueryのでの視認性をトグルクラス

Answer 3

Jqueryはきれいです。あなたはそれを使うべきです。それは非常に簡単です。

これだけです。

ステップ1：関数を呼び出すonclickの設定 "testFunction（）"

ステップ3：関数を定義

<script type="text/javascript"> 
    function testFunction() { 
    $('.noPhones').hide(); or $('.noPhones').show(); 
    // The $('.noPhones') selector selects all of the objects with a class of "noPhones" 
    // use $('#id') to select an item by ID 
    } 
</script> 

ます場合はjQueryの

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

は、ステップ2を含めますページの読み込み時に何かしたいのですが...

<script type="text/javascript"> 
    $(function(){ //define function here }); 
    // Stuff defined in function will execute on page load. 
</script> 

ほしいと思っています。 I LOVE JQUERY