在按钮单击不工作时更改文本“显示”/“隐藏”答案

【问题标题】：Change text "Show"/ "Hide" on Button Click not Working在按钮单击不工作时更改文本“显示”/“隐藏”
【发布时间】：2017-05-03 09:06:44
【问题描述】：

我希望的输出是当用户单击按钮时隐藏段落，并且相同的按钮将用于隐藏段落并更改按钮的名称。

正如您在 sn-p 中看到的输出，当我单击 Button 时，按钮的文本不会更改，段落也不会显示。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide("slow", function(){
                if($("#myShowHidebtn").prop('value', 'Show'))
                              $('#myShowHidebtn').html('Hide');
                alert("The paragraph is now hidden");
            });
            $("#myShowHidebtn").on("click", function(){
                 if($("#myShowHidebtn").prop('value', 'Hide'))
                              $('#myShowHidebtn').html('Show');
                alert("The paragraph is now hidden");
            });
        });
    });
    </script>
    </head>
    <body>
    <button id="myShowHidebtn">Hide</button>
    <p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>
    </body>
    </html>

【问题讨论】：

可以在sn-p中看到错误。 Html() -> html()。 JS 区分大小写
@RoryMcCrossan 我做到了！仍然没有显示段落文本。
您必须检查按钮 id 或值，并根据它隐藏/显示段落
@DivyeshGausvami 你的逻辑也有问题。我为你添加了答案。
如果我有多个正确的答案怎么办？ @RoryMcCrossan

标签： javascript jquery html show-hide jquery-events

【解决方案1】：

首先Html() 不正确。方法名称是html()。

您的逻辑问题是每次单击时都会向button 元素添加一个新的click 处理程序。要修复逻辑，只需在p 上调用toggle('slow')，然后根据当前设置直接在点击处理程序中更新button 的text()。您还可以使用stop() 来防止快速连续点击填满动画队列。试试这个：

$(document).ready(function() {
  $("button").click(function() {
    $("p").stop(true).toggle("slow");
    $("#myShowHidebtn").text(function(i, t) {
      return t == 'Hide' ? 'Show' : 'Hide';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

【讨论】：

【解决方案2】：

$("#myShowHidebtn").on("click", function() {
  console.log($(this).text() == 'Hide')
  if ($(this).text() == 'Hide') {
    $('#myShowHidebtn').text('Show');
    $("p").hide("slow");
  } else if ($(this).text() == 'Show') {
    $('#myShowHidebtn').text('Hide');
    $("p").show("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

删除按钮的事件处理程序
使用ID 添加事件处理程序
检查文本是否相等隐藏和显示

【讨论】：

非常感谢！ @guradio您的答案也有效，但我不能在这里批准多个答案:(

【解决方案3】：

您的代码有点复杂，逻辑上不正确。

正确的函数名是html()而不是Html()
您正在向另一个单击事件的回调函数中的按钮添加事件处理程序。这将在每次单击按钮时添加一个新的事件侦听器。这应该被删除。
不必添加处理程序，只需将逻辑添加到一个处理程序中，确保每次单击按钮时都将按钮和段落的文本切换到。

这应该很好用：

$("button").click(function(){
  $("p").toggle("slow", function(){
    if ($("p").is(':visible')) {
      $('#myShowHidebtn').html('Hide');
    } else {
      $('#myShowHidebtn').html('Show');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

【讨论】：

非常感谢！ @NagyNick您的答案也有效，但我不能在这里批准多个答案:(

【解决方案4】：

您正在设置属性值而不是执行 if 并且您还在每次点击时绑定了一个额外的点击事件。试试下面的（下面jQuery中的cmets）

$("#myShowHidebtn").click(function() {  // bind the click to the button
  var button = $(this);

  if (button.html() == 'Hide') {   // check the html (the button has no value and prop('','') is a setter not a getter
    $("p").hide("slow", function() {  // do your hide
      button.html('Show');
    });
  } else {
    $("p").show("slow", function() {  // do your show
      button.html('Hide');
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

【讨论】：

【解决方案5】：

您的代码中有几个问题需要纠正：

在您的实际代码中，通过附加 click 事件处理程序到你的按钮两次，它会导致无限循环，因为您要在按钮中重新附加 click 处理程序 click 自己。
您在if 中错误地使用了按钮的value 条件，下面的$("#myShowHidebtn").prop('value', 'Show')不正确，应该是$("#myShowHidebtn").prop('value') === 'Show'。
另一个问题是你没有改变按钮value所以你可以对其进行测试，您正在更改button html，所以您只需要测试.html()。

解决方案：

我尝试重构您的代码并纠正所有错误，这就是您所需要的：

$("#myShowHidebtn").on("click", function() {
  if ($("#myShowHidebtn").html() === 'Hide') {
    $('#myShowHidebtn').html('Show');
    $("p").hide("slow");
  } else {
    $('#myShowHidebtn').html('Hide');
    $("p").show("slow");
  }
});

演示：

$("#myShowHidebtn").on("click", function() {
  if ($("#myShowHidebtn").html() === 'Hide') {
    $('#myShowHidebtn').html('Show');
    $("p").hide("slow");
  } else {
    $('#myShowHidebtn').html('Hide');
    $("p").show("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

【讨论】：

谢谢！ @chsdk

【解决方案6】：

您应该使用$('#myShowHidebtn').html('Show'); $('#myShowHidebtn').html('Hide'); 而不是.Html - JavaScript 函数名称区分大小写。

【讨论】：

在 sn-p 中检查它！我确实改变了，但它仍然无法正常工作！

【解决方案7】：

$(document).ready(function(){

    $("#myShowHidebtn").click(function(){
        $("p").toggle(function(){
           if($("#myShowHidebtn").text() == "Hide"){ 
               $("#myShowHidebtn").text("Show"); }
           else{ $("#myShowHidebtn").text("Hide"); }
        });
    });

});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
感谢您试用 Dude！ :)

【解决方案8】：

在这个小代码 sn-p 中，我定义了按钮的默认行为 - hide。然后我们对p 标签做一个简单的检查——它是否隐藏？如果是这样，请将函数更改为show。然后我们在p 标签上执行函数，并根据函数的名称，在按钮中显示适当的值。

$(document).ready(function() {
  $("button").click(function() {
    var func = 'hide',
      $this = $(this),
      $p = $this.next();
    if ($p.is(':hidden')) {
      func = 'show';
    }
    $p[func]('slow', function() {
      $this.html(func == 'hide'?'Show':'Hide');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

【讨论】：

非常感谢！ @Richard您的答案也有效，但我不能在这里批准多个答案:(

【解决方案9】：

Rory 对，“Html”标签是问题的根源，因为 JS 区分大小写

我对代码进行了一些更改，看起来更智能。

var hidden = false;
$("#myShowHidebtn").click(function() {
    if (hidden == false)
  {
    $("p").hide("slow", function() { 
      $("#myShowHidebtn").html("Show");
      alert("The paragraph is now hidden");
      hidden = true;
    });
  }
  else
  {
    $("p").show("slow",  function() {
        $("#myShowHidebtn").html("Hide");
        alert("The paragraph is now shown");
        hidden = false;});
  }
});

工作正常，检查here

问候，

【讨论】：

感谢您尝试@Keeper