jQuery在切换期间更改'a'标签的属性答案

【问题标题】：jQuery Change attritube of 'a' tag during togglejQuery在切换期间更改'a'标签的属性
【发布时间】：2012-08-29 13:28:02
【问题描述】：

好的，我有一个<a 标记，它调用一个切换函数来删除一个<td 标记。在那个a 标签中我有&lt;&lt;...

在执行切换时，我想在函数中将<< 更改为>>。它不工作。我做错了什么？

html:

<td class="filter_td" id="filter_td">
  <td class="show_hide">
            <a href="javascript:toggleFilters();" id="show_hide" alt="Hide Filters" title="Hide Filters">&lt;&lt;</a>
        </td>

jquery:

   function toggleFilters()
{
    var td = $("#filter_td");
    td.toggle('slow');
    if (td.css("display") == "none")
    {
        $("#show_hide").html("&gt;&gt;").attr('title', 'Show Filters');
    }
    else
    {
        $("#show_hide").html("&lt;&lt;").attr('title', 'Hide Filters');
    }
}

【问题讨论】：

stackoverflow.com/questions/901909/…
not workng....if (td.css("display") == "none") 正在点击 else 语句

标签： javascript jquery html

【解决方案1】：

将更改文本的代码放入“切换”的回调中。这样，您就知道动画已完成并且元素的可见状态已完成。像这样的：

var td = $("#filter_td");
td.toggle('slow', function () {
    if (td.not(":visible"))
    {
        $("#show_hide").html("&gt;&gt;").attr('title', 'Show Filters');
    }
    else
    {
        $("#show_hide").html("&lt;&lt;").attr('title', 'Hide Filters');
    }
});

另外，我将检查是否隐藏更改为 jQuery 的“.not()”。这是一种更通用的方式来判断元素是否在页面上实际可见，而不是简单地查看其样式（可能未定义）。

【讨论】：

切换功能的结尾 ')' 应该放在哪里？
糟糕，抱歉，我在添加回调部分时忘记重新添加。它现在就在那里。
好的....这就是发生的事情。我点击了“>”
嘿 ianpgall...有没有办法让另一个 td 在我隐藏的那个旁边滑动而不是跳过
我在切换期间隐藏的 td 下有这个：<td class="content" id="content">

【解决方案2】：

$("#show_hide").on('click', function() {
    var td = $("#filter_td"),
        state = td.is(':visible');
    td.toggle('slow');
    $("#show_hide").html(state?"&gt;&gt;":"&lt;&lt;")
                   .prop('title', (state?'Hide':'Show')+' Filters');
});

FIDDLE

【讨论】：