Question

我有一个＆＃39; setVisibility＆＃39;功能代码只有一个按钮，效果很好，在这篇帖子中由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>

Answer 1

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

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

如果您需要更多信息，请与我们联系。

Answer 2

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

$("selector").toggle();

Answer 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()中填写数字或您的内容。

Answer 4

感谢超级大黄蜂，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');

瑞奇，你为我的第二个问题延伸了这一点，非常出色。它可以将按钮文本从“显示”和“隐藏”更改为我选择的不同单词，但如果需要，则将显示和隐藏单词保留为默认值：

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。

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

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

4 个答案: