取消隐藏/隐藏类

Question

所有人。

我正在尝试使用一个href链接来"onclick“切换取消隐藏和隐藏。我尝试过使用jQuery，javascript函数，但我似乎不太了解它的工作原理。我已经接近了。这就是我现在所拥有的(我的第八次尝试)

styles.css：

.noPhones{
    display: none;
}

javascript (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

在jQuery中切换可见性非常简单：

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

如果将ID应用于链接，则可以在jQuery onready方法中应用此操作：

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

Answer 2

你不能让document.getElementById(".noPhones")

您需要提供id属性，而不是class

Answer 3

Jquery非常整洁。你应该使用它。这非常简单。

就这么做吧。

步骤1:包含Jquery

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

步骤2:设置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>

如果您想在页面加载时执行某些操作，只需执行以下操作...

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

希望这能帮助我喜欢JQUERY