动画 Javascript 显示/隐藏按钮两次答案

【问题标题】：Animate Javascript show / hide button twice动画 Javascript 显示/隐藏按钮两次
【发布时间】：2014-07-19 09:08:05
【问题描述】：

我有一个“setVisibility”功能代码，它带有一个运行良好的按钮，在这篇文章中由 JRulle 提供： Animate Javascript show / hide button。
当按钮被点击时，它会淡出一些文本，然后当再次点击它时，它会淡出。都好。
但是，当我复制包含脚本的代码以在页面下方的另一个位置工作时，我无法让第一个代码独立于添加的代码工作，反之亦然。
感谢您的任何想法。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setVisibility</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">body {text-align: center; font-family: Arial; text-align: center;}   input {font-size: 1.1em;}</style>
</head> 
<body><br /><br />

<!--/ FIRST INSTANCE \-->

<script>
function setVisibility(id1) {
  if($('#bt1').val() == 'Hide'){
    $('#bt1').val('Which means ..');
    $('#' + id1).fadeOut();
  }
  else{
    $('#bt1').val('Hide');
    $('#' + id1).fadeIn();
  }
}
</script>

Lorem ipsum dolor sit amet, etc.

    <div style="display: none;" id="sub1">  <br /> Which means...
                                                    <div style="height: 1em;"></div>
Let's see what loves or pursues or desires the pain, etc.
    </div>                                          <div style="height: 1em;"></div>        
    <input type=button name=type id='bt1' value='Which means ..' onclick="setVisibility('sub1');">
                                                    <div style="height: 1em;"></div><hr />
    <!--/ SECOND INSTANCE \-->

Another instance needed here.

</body>
</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的函数正在寻找特定的 ID。可以这样想：如果您在同一个房间里有两个 Bob，而医生叫“Bob”？你认为会发生什么？很可能两个鲍勃都会站立。使用您的函数，它会查找#btn1。函数的重点是重用代码。如何重用声明特定 id 的函数？

使用处理程序执行您的函数，同时传递您单击的对象。

如果您需要更多信息，请告诉我。

【讨论】：

瑞奇谢谢。我要求将代码（包括“实例一”的脚本）复制到代码中显示的“实例二”的位置。是的，我知道我必须更改一些数字，包括 id，这就是我遇到问题的地方。而且我没有使用处理程序的知识。
没问题菲尔。所以我重写了你的代码，并将 javascript 和 css 与 html 分开（更多是出于 jsFiddle 的原因），并且我编写了具有可重用函数的处理程序。不要只是 复制它，从中学习。在使用它之前，请确保您了解它的工作原理。我建议使用 www.w3schools.com 和 jquery.com 等资源。他们有（imo）很棒的 api 文档。这是fiddle。

【解决方案2】：

尝试使用jquery的切换功能http://api.jquery.com/toggle/:

$("selector").toggle();

【讨论】：

嗨超级大黄蜂。我确实尝试过这样的示例，但无法获得我提供的代码的外观和效果。我也真的需要总代码。

【解决方案3】：

你应该让你的 CSS 和 JavaScript 外部化，并且你的脚本需要在 onload 或定义的 HTML 元素之下执行，但是：

function notQuiteFadeToggle(buttonId, hideShowId, hideVal, showVal){
  var btn = $('#'+buttonId), hds = $('#'+hideShowId);
  var hv = hideVal ? hideVal : 'Hide';
  var sv = showVal ? showVal : 'Show';
  btn.click(function(){
    if(btn.val() === hv){
      hds.fadeOut(); btn.val(sv);
    }
    else{
      hds.fadeIn(); btn.val(hv);
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2', 'Hide it Now', 'Show it Now');

根据需要在fadeIn() 和fadeOut() 中输入数字或您拥有的数字。

【讨论】：

感谢 PHP 胶水。正是我需要的。现在我可以在网页上放置多个这样的效果，我想知道按钮名称（值）是否可以使用类似这样的方式从“显示”和“隐藏”中更改：notQuiteFadeToggle('bt1', 'sub1', ' ', ' ');notQuiteFadeToggle('bt2', 'sub2', ' ', ' ');
id 参数如notQuiteFadeToggle('bt1', 'sub1', 'show1', 'hide1'); 和notQuiteFadeToggle('bt2', 'sub2', 'show2', 'hide2');

【解决方案4】：

感谢 Super Hornet、PHPglue 和 Ricky 抽出宝贵时间，为我需要的代码提供了出色的解决方案。

PHPglue，您发布的这段代码完美地回答了我最初的问题。它保留了淡入/淡出效果。它使多个效果能够在单个网页上相互独立地显示。它只需要一段 JavaScript 代码：

function notQuiteFadeToggle(button, hideShow){
  var btn = $('#'+button), hds = $('#'+hideShow);
  btn.click(function(){
    if(btn.val() === 'Hide'){
      hds.fadeOut(); btn.val('Show');
    }
    else{
      hds.fadeIn(); btn.val('Hide');
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2');

Ricky，您在我的第二个问题上对此进行了扩展，非常出色。它可以将按钮文本从“显示”和“隐藏”更改为我选择的不同单词，但如果需要，将“显示”和“隐藏”单词保留为默认值：

function notQuiteFadeToggle(buttonId, hideShowId, hideVal, showVal){
  var btn = $('#'+buttonId), hds = $('#'+hideShowId);
  var hv = hideVal ? hideVal : 'Hide';
  var sv = showVal ? showVal : 'Show';
  btn.click(function(){
    if(btn.val() === hv){
      hds.fadeOut(); btn.val(sv);
    }
    else{
      hds.fadeIn(); btn.val(hv);
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2', 'Hide it Now', 'Show it Now');

PHPglue，您指出脚本应该在 html 激活后运行，并且我可以在 fadeIn() 和 fadeOut() 中放置（速度、缓动、回调）。非常感谢您提供的额外信息。

Ricky，您展示了您的 JSFiddle 项目及其演示。我现在大致了解“处理程序”是什么。我对 JavaScript 的工作原理非常感兴趣，非常有趣。感谢您提供参考链接，不胜感激。

我现在希望在 windows onload 中包含这一行以替换 div 效果中的 display:none：

$('.wait').delay(1000).slideUp();

发现于google crawl — display:none? 带有JSFiddle的链接。

无论如何，非常感谢你们。

【讨论】：