当我使用已编写的多个功能单击按钮时，为什么我的网站上显示的图像没有消失？

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 个解决方案

解决方案1
0 已采纳 2016-07-28 04:38:35

解决方案2
0 2016-07-28 04:44:36

当我使用已编写的多个功能单击按钮时，为什么我的网站上显示的图像没有消失？

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-07-28 04:38:35

解决方案2 0 2016-07-28 04:44:36

解决方案1
0 已采纳 2016-07-28 04:38:35

解决方案2
0 2016-07-28 04:44:36