为什么这个 jQuery 显示/隐藏切换有效，我怎样才能让它变得更好？答案

【问题标题】：Why does this jQuery show/hide toggle work and how can i make it better?为什么这个 jQuery 显示/隐藏切换有效，我怎样才能让它变得更好？
【发布时间】：2012-02-23 16:38:36
【问题描述】：

On this page 两个开/关图标在表格中显示/隐藏两行之间切换。

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

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

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

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

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

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

感谢所有帮助过的人！

最终结果会切换 IMG ALT 属性并继续检查显示/隐藏状态，和 IMG TITLE 标签也被切换。

使用正确的 jquery“prop”代替“attr”。

Placekittens 已实现。

    <!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>

【问题讨论】：

我已经看到通过使用图像名称来完成此操作。同一张图片保存一次为 imagename_open.jpg 和 imagename_closed.jpg。然后你可以为这些名字添加一个事件，你就会知道你处于什么状态。
请在问题中包含相关代码。不要依赖 jsfiddle。
我猜它可以工作，因为您测试过的浏览器允许图像标签中包含 html 内容，即使这不是标准。
“为什么它有效？”：它没有。 'else' 总是触发。
@Prusse 谢谢！我仍然想知道为什么没有手动包装它就不起作用。 jsFiddle 文档指出“在此面板中输入的代码将放置在标题的脚本块中，即之间。”

标签： javascript jquery

【解决方案1】：

它只是隐藏而不再次显示行。这是因为执行代码以显示条件是 $(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/

【讨论】：

除非他想关闭（或至少更改）img alt 属性
抱歉错过了，我的错。猜猜 Nicocube 的答案更好 =)
@Prusse 我已经考虑了几天（重写了整个事情），你使用类来存储状态的想法比 Alt attr 更好。我首先要求 Alt，因为我复制/粘贴了代码。再次感谢！

【解决方案2】：

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) 你正在改变链接的 alt，而不是图像 2) 在 jQuery 1.7 中你想使用 prop() 而不是 attr()
我知道这不是纯粹的 JQuery 方法，但它是按原样完成工作的更短的方法。我是一个懒惰的流浪汉。 ^_^

【解决方案3】：

回答您的问题：

代码实际上不能正常工作。它在图像标签中使用封闭文本，即<img>show</img>，我认为这不是一个好习惯。这个封闭的文本是使用.html() 获得的，但不幸的是它返回一个空字符串"" 执行($(source).html() == "show" 语句false 然后只隐藏元素。
下面有一个工作代码可以根据需要切换图像的元素和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属性。

一个工作示例是here。

【讨论】：

【解决方案4】：

伊迪丝说： 强制不是问题 - 它只是总是触发的无人看管的 else 分支

好吧，它在 jsfiddle 中不起作用，在网站上它只是隐藏了行，所以我认为 == 运算符是有罪的。它将“显示”强制为 true 或 1 ...与您正在比较的任何内容。既然你在 if 语句中有这个东西，它只是将它强制为至少使隐藏工作的东西:)。

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

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

http://javascript.crockford.com/

【讨论】：

当双方都是字符串值时，== 不会强制转换为 1 或 true。
是的，你实际上是对的 O:-) ...但无论如何， crockford.com 看起来不错