jquery动态切换按钮

使用jQuery，我尝试用一种快速而肮脏的方式来更改控件按钮（#ctrlBtn）的内部html文本，以使用html（）方法反映div的slideToggle（）的状态。我似乎无法理解它。它会在第一次单击时更改按钮文本，但就这样。。。 代码如下：

<script type="text/javascript">
      $(document).ready(function(){
        $("#StatsDetail").slideToggle(); //hide it to start
        $("button").click(function(){
          $("#StatsDetail").slideToggle(); //show/hide 
          // the next line is not working even w/standard if/else syntax...
          ($("#ctrlBtn").html!="Hide") ? $("#ctrlBtn").html("Hide") : "#ctrlBtn").html("View"); 
        }); //end-onClick
      }); //end-onLoad
</script>
<span class="right"><button><div id="ctrlBtn">View/Hide Details</div></button></span>
<div id="StatsDetail"> Lorem ipsum yadda yadda blah </div>

我知道我一定错过了一些非常愚蠢的事情。任何帮助都将不胜感激

乔·内格罗~NYC

我来试试：

var ctrlBtn = $("#ctrlBtn");
var statsDetail = $("#StatsDetail");

statsDetail.hide(); //hide it to start

ctrlBtn.click(function(){
  statsDetail.slideToggle();
  ctrlBtn.text( ((ctrlBtn.text() === 'Hide') ? 'View' : 'Hide') );
});

你需要注意的是：

• 始终缓存jQuery对象，因为每次需要更改属性时都要创建新对象是非常昂贵的
• 当您试图隐藏某些内容时，请使用

  hide（）

  。您所做的不仅是显而易见的，而且还避免了滑动效果附带的动画（或者，如果您确实想要动画，则使用

  slideUp（）

  ）
• 你的三元运算符把你弄糊涂了。你的括号不平衡
• 我也会停止将

  div

  放在

  按钮中，因为它不是有效的HTML。将
  id
  放在
  按钮上，然后使用
  display:inline block

我来试一试：

var ctrlBtn = $("#ctrlBtn");
var statsDetail = $("#StatsDetail");

statsDetail.hide(); //hide it to start

ctrlBtn.click(function(){
  statsDetail.slideToggle();
  ctrlBtn.text( ((ctrlBtn.text() === 'Hide') ? 'View' : 'Hide') );
});

你需要注意的是：
• 始终缓存jQuery对象，因为每次需要更改属性时都要创建新对象是非常昂贵的
• 当您试图隐藏某些内容时，请使用

  hide（）

  。您所做的不仅是显而易见的，而且还避免了滑动效果附带的动画（或者，如果您确实想要动画，则使用

  slideUp（）

  ）
• 你的三元运算符把你弄糊涂了。你的括号不平衡
• 我也会停止将

  div

  放在

  按钮中，因为它不是有效的HTML。将
  id
  放在
  按钮上，然后使用
  display:inline block

---

幻灯片动画完成后，这将使用回调函数执行您想要的操作：

$("button").click(function() {
    $("#StatsDetail").slideToggle(function() {
        $('#ctrlBtn').text($(this).is(':visible')? 'hide' : 'show');
    });
});

其工作方式是在

#statsdail

上完成滑动切换后执行定义的回调函数。然后检查

#StatsDetail

是否可见，并相应地设置按钮

---

您可以看到它。
这将在幻灯片动画完成后使用回调函数执行您想要的操作：

$("button").click(function() {
    $("#StatsDetail").slideToggle(function() {
        $('#ctrlBtn').text($(this).is(':visible')? 'hide' : 'show');
    });
});

其工作方式是在

#statsdail

上完成滑动切换后执行定义的回调函数。然后检查

#StatsDetail

是否可见，并相应地设置按钮

---

你可以看到它。
太棒了！回调的使用非常优雅。我想我也可以使用三元（$（this）.is（“：visible”）$（“#ctrlBtn”）.text（“隐藏”）：$（“#ctrlBtn”）.text（“查看详细信息”）；当然，你可以使用三元运算符——看我更新的例子。这绝对是最干净的“快脏”解决方案。荣誉易张的建议是否能提高效率？那么无效的html呢？浏览器似乎可以处理它……是的，缓存肯定会加快Javascript的速度，但是如果你没有运行太多，你不必担心。至于无效的html，那是你的决定。如果它显示正常，并且您不担心有效代码，那么您可以保留它。需要注意的一点是，有效的html将在不同的浏览器中更加一致地显示。太棒了！回调的使用非常优雅。我想我也可以使用三元（$（this）.is（“：visible”）$（“#ctrlBtn”）.text（“隐藏”）：$（“#ctrlBtn”）.text（“查看详细信息”）；当然，你可以使用三元运算符——看我更新的例子。这绝对是最干净的“快脏”解决方案。荣誉易张的建议是否能提高效率？那么无效的html呢？浏览器似乎可以处理它……是的，缓存肯定会加快Javascript的速度，但是如果你没有运行太多，你不必担心。至于无效的html，那是你的决定。如果它显示正常，并且您不担心有效代码，那么您可以保留它。需要注意的一点是，有效的html将在不同的浏览器中更加一致地显示。更加干净。Thanx的快速响应和您的优化非常有意义。我也没想到把身份证放在按钮上。我想我草率的编码是一回事，但最大的逻辑错误是条件上的“==”，并使用text（）而不是html（）。更干净。Thanx的快速响应和您的优化非常有意义。我也没想到把身份证放在按钮上。我想我草率的编码是一回事，但最大的逻辑错误是条件上的“==”，并使用text（）而不是html（）。这是关于的教程，这是关于和的教程