Question

大家。

我正在尝试使用href链接“onclick”切换取消隐藏和隐藏。我已经尝试过使用jQuery，javascript函数，但我似乎并不知道它是否足以让它工作。我已经接近了。这就是我现在所拥有的（我的第8次尝试）

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

你不能拥有document.getElementById(".noPhones")

你需要给一个id属性而不是一个类

Answer 2

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

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

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

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

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

取消隐藏/隐藏课程

3 个答案: