Question

我需要以下代码的帮助，我创建了一个按钮来显示和隐藏div。我应用了一些jQuery。对我来说似乎一切都很好，但它仍然不起作用，我似乎无法找到原因？

＆＃13;

$(document).ready(function() {

  $("#closeButton").click(function() {
    if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
    }
    if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
    }
  });

});

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name<span>
</div>
<input type="button" value="Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />

＆＃13;

Answer 1

你需要一个else块。你的两个如果条件一个接一个地运行。使用

if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
}
else if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
}

Answer 2

你需要在你的情况下使用else：

if ( $("#closeButton").val() === "Close Drawer" ) {
  $("#topDrawer").hide();
  $("#closeButton").val("Open Drawer");
} else {
  $("#topDrawer").show();
  $("#closeButton").val("Close Drawer");
}

否则两个语句都会被触发，按钮将切换两次并返回到默认情况Close Drawer，你不会注意到它，因为它会在几毫秒内改变。

注意：您可以在没有第二个if语句的情况下使用else，请查看工作代码段。

＆＃13;

$(document).ready(function() {

  $("#closeButton").click(function() {
    if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
    } else if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
    }
  });
});

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name</span>
</div>
<input type="button" value="Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />
<script src="script.js"></script>

＆＃13;

Answer 3

您的<span>元素未正确关闭且if语句未设置为if/else，因此两个if语句都在运行。但是，如果两种情况都不成真，就不会发生任何事情。

话虽如此， JQuery .toggle() 方法以及 JavaScript ternary operator 使这更简单，并且无需if/else首先。

您还应该使用JQuery .on() 方法按照JQuery团队的建议设置事件处理程序。

＆＃13;

$(function() {
  $("#closeButton").on("click", function() {
    $("#topDrawer").toggle("slow");  // Toggle the visibility of the element
    // Change the vale of the element based on what it is now
    $("#closeButton").val() === "Close Drawer" ?  
       $("#closeButton").val("Open Drawer") : $("#closeButton").val("Close Drawer");
  });
});

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name</span>
</div>
<input type="button" value = "Close Drawer" class="btn btn-primary btn-sm" id="closeButton">

＆＃13;

Answer 4

纠正您的情况如下

$(document).ready(function() {


  $("#closeButton").click(function() {

    if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
    }
    else if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
    }

  });


});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name<span>
    </div>
    <input type="button" value = "Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />


      <script>

      </script>
<script src="script.js"></script>

Answer 5

我尝试使用else if块进行此操作，它可以正常工作。还有一件事我使用prop来设置值（认为它不会影响你的代码）。除了一切都与你的代码相同。

$(document).ready(function() {
  
   $("#closeButton").click(function() {
   
    if ($("#closeButton").val() === "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").prop('value', "Open Drawer");
    } else if ($("#closeButton").val() === "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").prop('value', "Close Drawer");
    }
  });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name<span>
    </div>
    <input type="button" value = "Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />

隐藏/显示按钮在jquery中不起作用

5 个答案: