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

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

您的逻辑问题是，每次点击时，您都会向click元素添加新的button处理程序。要修复逻辑，只需在toggle('slow')上调用p，然后直接在点击处理程序中根据其当前设置更新text() button。您还可以使用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 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
检查文本是否等于隐藏并显示

Answer 3

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

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

这应该很有效：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您的代码中应该纠正几个问题：

在你的实际代码中，你附加了一个很大的错误按钮的click事件处理程序两次，会导致无限循环，因为您正在重新附加按钮中的click处理程序 click本身。
您value错误地使用了按钮的if 条件，以下$("#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");
  }
});

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您正在设置属性值而不执行if，并且您还在每次单击时绑定额外的单击事件。尝试以下（jQuery中的注释）

＆＃13;

$("#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');
    });
  }

});

＆＃13;

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

＆＃13;

Answer 6

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

Answer 7

$(document).ready(function(){

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

});

Answer 8

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

Rory对，＆＃34; Html＆＃34;标签是问题的根源，因为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

此致

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

9 个答案: