为什么这个jQuery显示/隐藏切换有效，以及我如何使它变得更好

Why does this jQuery show/hide toggle work and how can i make it better?

本文关键字：变得更好 何使它 有效 jQuery 显示 隐藏 为什么      更新时间：2023-09-26

在此页面上两个打开/关闭图标在显示/隐藏表中的两行之间切换。

跟踪行状态是否显示的jquery机制是检查可点击文本是"显示"还是"隐藏"：

if ($(source).html() == "show") {
        $(source).html("hide");
        viewContainer.show();
    }
    else {
        $(source).html("show");
        viewContainer.hide();
    }

我知道这应该适用于常规的<a href="...">show</a>链接，其中有实际的"显示"或"隐藏"文本要检查和更改，但它也适用于没有任何可以在"隐藏"answers"显示"之间交替的文本的<img>标记。

  1. 为什么这样做？

  2. 我真正想做的是将IMG ALT文本与显示和隐藏的行一起切换。关于如何做到这一点，有什么线索吗？

（顺便说一句，我试着把代码塞进http://jsfiddle.net/2Jj2w/2/，但在那里不起作用。有什么想法吗？）

======编辑======

感谢所有提供帮助的人！

最终结果切换IMG ALT属性并保持对显示/隐藏状态的检查，并且IMG TITLE标签也被切换。

使用了正确的jquery"prop"而不是"attr"。

实施了安慰剂。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'><!--mce:0--></script>
    <script type="text/javascript"> 
    function toggleShowHide(id, source) {
         viewContainer = $(id);
         if ($(source).prop('alt') == "hidden") {
              viewContainer.show();
              $(source).prop('title', "Hide details");
              $(source).prop('alt', "shown");
         }
         else {
              $(source).prop('alt', "hidden");
              viewContainer.hide();
              $(source).prop('title', "Show details");
         }
    }</script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <a href="javascript:toggleShowHide('#row1', '#toggle_row1')" ><img src="http://placekitten.com/40/40" id="toggle_row1" alt="hide" title="Hide details"  /></a> <a href="javascript:toggleShowHide('#row2', '#toggle_row2')" ><img src="http://placekitten.com/40/40" id="toggle_row2" alt="hide" title="Hide details" /></a>
    <table border="1" width="200">
        <tbody id="row1">
            <tr>
                <td>ROW1</td>
            </tr>
        </tbody>
        <tbody id="row2">
            <tr>
                <td>ROW2</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>

它只是隐藏并不再显示行。这是因为执行代码以显示条件为$(source).html() == "show"，而对于图像标签，它评估为"" == "show"，这是错误的，导致执行else块。如果你玩className，它会很好用：

if ($(source).hasClass("respective_row_show")) {
        $(source).removeClass("respective_row_show");
        viewContainer.show();
    }
    else {
        $(source).addClass("respective_row_show");
        viewContainer.hide();
    }

示例：http://jsfiddle.net/2Jj2w/6/

function toggleShowHide(id, source) {
    viewContainer = $(id)
    if ($(source).attr('alt') == "show") {
        $(source).attr('alt',"hide");
        viewContainer.show();
    }
    else {
        $(source).attr('alt',"show");
        viewContainer.hide();
    }
}

这是有效的。

回答您的问题：

  1. 代码实际上不能正常工作。它使用了图像标签中的封闭文本，即<img>show</img>，我认为这不是一个好的做法。这个封闭文本是使用.html()获得的，但不幸的是，它返回了一个空字符串""，使($(source).html() == "show"语句为false，然后只隐藏元素。

  2. 下面有一个工作代码，可以根据需要切换图像的元素和alt属性。

    $('img[data-toggle]').toggle(function () {
    var $this = $(this);
    $this.prop('attr', 'show');
    $($this.data('toggle')).hide();
}, function () {
    var $this = $(this);
    $this.prop('attr', 'hide');
    $($this.data('toggle')).show();
});

    此代码要求您添加data-toggle属性，而不是原始示例在要包含切换事件的元素中使用的内联javascript。属性的值是要实际切换的元素。

    <img src="image.jpg" id="toggle_row1" alt="hide" data-toggle="#row1"/>

    上面的图像将切换id等于#row1的元素，并将切换图像的alt属性。

    下面是一个工作示例。

伊迪丝说：强制不是问题所在，只是没有防备的else分支总是触发

它在jsfiddle中不起作用，在网站上它只是隐藏行，所以我认为==运算符是有罪的。它强制"show"为true或1。。。现在你在if语句中有了这个东西，它只是将它强制为至少可以隐藏的东西：）。

有关强制的详细信息，请参阅Douglas Crockford

http://www.youtube.com/watch?v=hQVTIJBZook

http://javascript.crockford.com/

相关文章：