更改按钮上的文本 "Show"/ "Hide" 单击不起作用

Question

我想要的输出是当用户单击按钮时隐藏段落，同一个按钮将用于隐藏段落并更改按钮的名称。

正如您在片段中看到的输出，当我点击按钮时，按钮的文本没有改变，段落也没有显示。

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

Answer 1

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

Answer 2

首先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>

Answer 3

$("#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
检查文本是否相等隐藏和显示

Answer 4

$(document).ready(function(){

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

});

Answer 5

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

正确的函数名称是 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>

Answer 6

在这个小代码片段中，我定义了按钮的默认行为 - 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>

Answer 7

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

在您的实际代码中，您犯了一个大错误，因为附加了 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>

Answer 8

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

$("#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>

Answer 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

此致，

更改按钮上的文本 "Show"/ "Hide" 单击不起作用

Change text "Show"/ "Hide" on Button Click not Working

html

javascript

jquery

show-hide

jquery-events