Question

在我的程序中，我编写了几个函数，以便当您键入任意数量的票证持有者和从1到550的补充传递时，之后，当您单击“计算可用座位”按钮时，它将显示：“可用座位数是“然后555减去持票人和补充通行证的数量。另外，我还希望一旦点击“计算可用座位”按钮，下面飞机的图像就会消失。因此，当我点击该按钮时，我使用jQuery（因为我的老师想让我）使图像消失，这就是：

$("#btnSubmit").click(function() {
    $('#airbus').hide();
});

然而，当我加载网页并对其进行测试时，当我点击“计算可用座位”按钮时，图像不会消失。我在这里做错了什么？

这是我的airbus.js文件：

var name = "Michael Bao";
var copyrightdate = 2016;

function copyright() {
    console.log(name, copyrightdate);
}

var TicketHolders1 = document.getElementById("txtTickets");
var ComplementaryPasses1 = document.getElementById("txtPasses");

function number_of_available_seats(TicketHolders, ComplementaryPasses) {
      var answer = 555 - (parseInt(TicketHolders) + parseInt(ComplementaryPasses));
        return("The number of available seats is " + answer);
    }

    function showresults(TicketHolders, ComplementaryPasses) {
        document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses);
    }

    var button = document.getElementById("btnSubmit");

    function clickonbutton(){
     var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
     var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;
     showresults(TicketHolders, ComplementaryPasses);
    }

    button.onclick = function() {
    clickonbutton();
    };

    $("#btnSubmit").click(function() {
        $('#airbus').hide();
    });


TicketHolders1.onblur = function() {
    if (TicketHolders1.value == "") {
        TicketHolders1.value = 0;
    }
};

ComplementaryPasses1.onblur = function() {
    if (ComplementaryPasses1.value == "") {
        ComplementaryPasses1.value = 0;
    }
};

这是我的airbus.html文件：

<!DOCTYPE html>
<!-- airbus.html -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Airbus Seat Calculator</title>
<style>
DIV.movable { position:absolute;}
</style>

</head>

<body>

  <h2>Airbus Seat Calculator</h2>

  <form id="formTest" method="get" action="processData">
    <table>

    <tr>
      <td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td>
      <td><input type="text" id="txtTickets" name="tickets"></td>
    </tr>
    <tr>
      <td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td>
      <td><input type="text" id="txtPasses" name="passes"></td>
    </tr>


    <tr>
      <td>&nbsp;</td>
      <td>
          <input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
    </tr>
    </table>
  </form>
<img id="airbus" src="images/airbus.png" />

<div id="results">  
</div>
<h2>Michael Bao
    2016</h2>
<script src="airbus.js">


</script>

</body>
</html>

Answer 1

您需要在

中定义您的jquery事件侦听器

$（document）.ready（function（）{

}）;

尝试以下代码

$( document ).ready(function() {
    $("#btnSubmit").click(function() {
      $('#airbus').hide();
   });
});

Answer 2

你走了。用户.classList.toggle。

var pic = document.getElementsByTagName('img')[0];
var btn = document.getElementsByTagName('button')[0];

btn.addEventListener("click", function(){
    pic.classList.toggle('hide');
});

img{
  height: 48px;
}
.hide{
  display:none;
}

<img src="http://simpleicon.com/wp-content/uploads/android.svg" alt="test">
<button>Test</button>

当我使用我编写的几个函数单击按钮时，为什么我网站上显示的图像不会消失？

2 个答案: