jQuery更改'a'标签

jQuery Change attritube of 'a' tag during toggle

本文关键字：标签 更改 jQuery      更新时间：2023-09-26

好的，我有一个<a标记，它调用切换函数来删除<td标记。在那个a标签中，我有&lt;&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');
    }
}

将更改文本的代码放入"toggle"的回调中。这样，您就知道动画是完整的，元素的可见状态也是完整的。类似这样的东西：

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（）"。这是一种更通用的方法，可以判断元素是否在页面上可见，而不是简单地查看其样式（可能未定义）。

$("#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

相关文章：