当你点击按钮时，文本应该淡出，搜索结果应该淡入。但没有任何反应。我也试过jquery隐藏和显示，确实没有发生任何事情。还使用了jquery css并且没有成功。
$(document).ready(function() {
$("#searchSubmit").click(function() {
var question = {
q: $("#searchQuestion").val()
}
var data = ["mobileApp", "mobileLearning"]
console.log(data.length)
if (data.length == 0) {
console.log('un')
alertify.error("nothing found")
} else {
var info = {
searchResult: data,
serachQ: $("#searchQuestion").val()
}
$('.main').fadeOut();
console.log("hey")
document.getElementById("resultLength").innerHTML = data.length;
document.getElementById("searchQ").innerHTML = info.serachQ;
document.getElementsByClassName(".date").innerHTML = new Date().getDate()
document.getElementsByClassName(".time").innerHTML = new Date().getTime()
$('#searchPage').fadeIn();
for (var i = 0; i < data.length; i++) {
switch (data[i]) {
case "smartFarming":
$("#smartFarming").fadeIn();
break;
case "smartEnergyMonitoring":
$("#smartEnergyMonitoring").fadeIn()
break;
case "smartIoTbasedDigitalSignage":
$("#smartIoTBasedDigitalSignage").fadeIn();
break;
case "smartSurveySolutions":
$("#smartSurvey").fadeIn()
break;
case "smartHydroponics":
$("#smartHydroponics").fadeIn();
break;
case "smartEnvironmentalMonitoring":
$("#smartEnvironmentalMonitoring").fadeIn();
break;
case "smartBuildingManagement":
$("#smartBuildingManagement").fadeIn();
break;
case "invention":
$("#skyMicsInvention").fadeIn();
break;
case "mobileApp":
$("#mobileAppRobotechClub").fadeIn();
break;
case "mobileLearning":
$("#mobileLearning").fadeIn();
}
}
}
})
});@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
.container {
margin-top: 20px;
}
.mb20 {
margin-bottom: 20px;
}
hgroup {
padding-left: 15px;
border-bottom: 1px solid #ccc;
}
hgroup h1 {
font: 500 normal 1.625em "Roboto", Arial, Verdana, sans-serif;
color: #2a3644;
margin-top: 0;
line-height: 1.15;
}
hgroup h2.lead {
font: normal normal 1.125em "Roboto", Arial, Verdana, sans-serif;
color: #2a3644;
margin: 0;
padding-bottom: 10px;
}
.search-result .thumbnail {
border-radius: 0 !important;
}
.search-result:first-child {
margin-top: 0 !important;
}
.search-result {
margin-top: 20px;
}
.search-result .col-md-2 {
border-right: 1px dotted #ccc;
min-height: 140px;
}
.search-result ul {
padding-left: 0 !important;
list-style: none;
}
.search-result ul li {
font: 400 normal .85em "Roboto", Arial, Verdana, sans-serif;
line-height: 30px;
}
.search-result ul li i {
padding-right: 5px;
}
.search-result .col-md-7 {
position: relative;
}
.search-result h3 {
font: 500 normal 1.375em "Roboto", Arial, Verdana, sans-serif;
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.search-result h3>a,
.search-result i {
color: #248dc1 !important;
}
.search-result p {
font: normal normal 1.125em "Roboto", Arial, Verdana, sans-serif;
}
.search-result span.plus {
position: absolute;
right: 0;
top: 126px;
}
.search-result span.plus a {
background-color: #248dc1;
padding: 5px 5px 3px 5px;
}
.search-result span.plus a:hover {
background-color: #414141;
}
.search-result span.plus a i {
color: #fff !important;
}
.search-result span.border {
display: block;
width: 97%;
margin: 0 15px;
border-bottom: 1px dotted #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div class="col-md-3 col-lg-3 col-xs-3">
<div>
<form class="navbar-form">
<div class="input-group">
<input type="text" id="searchQuestion" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" style="height: 3px!important;" id="searchSubmit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</header>
<div id="main" class="main">
<p>this shoul be fade out</p>
</div>
<div id="searchPage" style="display: none;">
<section class="col-xs-12 col-sm-6 col-md-12">
<article id="smartFarming" class="search-result row" style="display: none;">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartFarming.html" title="smart farming solutions" class="thumbnail"><img src="images/banner-11-1900x570.jpg" alt="smart farming solutions" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartFarming.html" title="smart farming solutions">smart farming solutions</a></h3>
<p>For farmers and growers, the Internet of Things has opened up extremely productive ways to cultivate soil and raise livestock with the use of affordable, easy-to-install sensors and an abundance of insightful data they offer.</p>
<span class="plus"><a href="./html/smartFarming.html" title="smart farming solutions"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartEnergyMonitoring" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartEnergyMonitoring.html" title="smartEnergyMonitoring" class="thumbnail"><img src="images/Dashboard1.png" alt="smart farming solutions" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartEnergyMonitoring.html" title="smartEnergyMonitoring">smart Energy Monitoring</a></h3>
<p>Real energy management requires an energy monitoring system, which means knowing how much energy you are using. If you know how much energy your home is using and when it’s using it, you can better respond to that usage and take control of your
costs.</p>
<span class="plus"><a href="./html/smartEnergyMonitoring.html" title="smartEnergyMonitoring"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartIoTBasedDigitalSignage" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartIoTbasedDigitalSignage.html" title="smartIoTbasedDigitalSignage" class="thumbnail"><img src="images/nahlad_final_01_603b659a0c0b9e3c3a92549c0aefc11a.jpg" alt="smartIoTbasedDigitalSignage" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartIoTbasedDigitalSignage.html" title="smart IoT based Digital Signage">smart IoT based Digital Signage</a></h3>
<p>Smart Digital Signage Solutions is a result of SKYMICS research and development to provide an affordable but complete and versatile solution for private sectors and SMEs.</p>
<span class="plus"><a href="./html/smartIoTbasedDigitalSignage.html" title="smart IoT based Digital Signage"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartSurvey" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartSurveySolutions.html" title="smartSurveySolutions" class="thumbnail"><img src="images/mmc-web.jpg" alt="smartSurveySolutions" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartSurveySolutions.html" title="smartSurveySolutions">smart Survey Solutions</a></h3>
<p>
Smart Survey Solutions allows users to quickly create intuitive, powerful, onlined question-and-answer (but there is no need for internet) surveys that can work for tens to thousands of participants without much effort.
</p>
<span class="plus"><a href="./html/smartSurveySolutions.html" title="smartSurveySolutions"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartHydroponics" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartHydroponics.html" title="smartHydroponics" class="thumbnail"><img src="images/Biopod_Inhabitat.jpg" alt="smartHydroponics" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartHydroponics.html" title="smartHydroponics">smart Hydroponics</a></h3>
<p>At Skymics we have come up with the solution that can help gardeners and farmers get the most out of their efforts by using sensors that monitor the necessary factors needed for growing a plant. We designed a self-contained, automatic, connected
hydroponic growing environment by IOT. All it needs are some seeds, water and nutrient solution</p>
<span class="plus"><a href="./html/smartHydroponics.html" title="smartHydroponics" ><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartEnvironmentalMonitoring" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartEnvironmentalMonitoring.html" title="smartEnvironmentalMonitoring" class="thumbnail"><img src="images/DYv6dbPVMAAudpy.jpg" alt="smartEnvironmentalMonitoring" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartEnvironmentalMonitoring.html" title="smartEnvironmentalMonitoring">smart Environmental Monitoring</a></h3>
<p>This solution helps us to collect the environmental data in different parts of the city. The data will be stored on the cloud and analysed for further use which includes forecast of the weather status, measurement of the air pollution and so
on. Results will be used for commercial use and public benefit.
</p>
<span class="plus"><a href="./html/smartEnvironmentalMonitoring.html" title="smartEnvironmentalMonitoring"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="smartBuildingManagement" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/smartBuildingManagement.html" title="smartBuildingManagement" class="thumbnail"><img src="images/Smart-building-automation.jpg" alt="smartBuildingManagement" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/smartBuildingManagement.html" title="smartBuildingManagement">smart Building Management</a></h3>
<p>Skymics Smart Building Management System is a new way to manage your building easier in order to increase operational and energy efficiency. Our solutions can successfully integrate, install and maintain building management systems and provide
life cycle support for any type and scale of building. We are making it easier to increase the operational performance of the facility as well as the comfort and safety of building occupants</p>
<span class="plus"><a href="./html/smartBuildingManagement.html" title="smartBuildingManagement"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="skyMicsInvention" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/invention.html" title="invention" class="thumbnail"><img src="images/innovation-solutions-title2.jpg" alt="invention" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/invention.html" title="invention">invention</a></h3>
<p>65% of the world’s population has no Internet access and therefore have no opportunity to gain information and knowledge. SKYMICS E-Learning hardware solutions offers the new technology that can bring the online and electronic education to anywhere
in the world</p>
<span class="plus"><a href="./html/invention.html" title="invention"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="mobileAppRobotechClub" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/mobileApp.html" title="mobileApp" class="thumbnail"><img src="images/1494404290-ca13-jpg.jpg" alt="mobileApp" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/mobileApp.html" title="mobile App">mobile App</a></h3>
<p>Today, we have a computer in our pocket that is more than 100,000 times faster than the first home computers. It is connected to every other computer on the planet and can access virtually every piece of human knowledge ever created, nearly
instantaneously</p>
<span class="plus"><a href="./html/mobileApp.html" title="mobile App"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
<article id="mobileLearning" style="display: none" class="search-result row">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="./html/mobileLearning.html" title="mobileLearning" class="thumbnail"><img src="images/school_tablets001-1.jpg" alt="mobileLearning" /></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<ul class="meta-search">
<li><i class="glyphicon glyphicon-calendar"></i> <span class="date"></span></li>
<li><i class="glyphicon glyphicon-time"></i> <span class="time"></span></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
<h3><a href="./html/mobileLearning.html" title="mobile Learning">mobile Learning</a></h3>
<p>Mobile learning solutions from Skymics can open up a world of knowledge – and possibilities.</p>
<span class="plus"><a href=href="./html/mobileLearning.html" title="mobile Learning"><i class="glyphicon glyphicon-plus"></i></a></span>
</div>
<span class="clearfix borda"></span>
</article>
</section>
</div>
<script src="test.js"></script>
</body>
答案 0 :(得分：0)
你有几个问题。
该按钮没有type属性，因此默认为type="submit"并提交表单。因此，当您单击按钮时，您将重新加载页面。
将其更改为type="button"以防止此情况发生。
这些行不起作用：
document.getElementsByClassName(".date").innerHTML = new Date().getDate()
document.getElementsByClassName(".time").innerHTML = new Date().getTime()
getElementsByClassName会返回一个集合，而不是单个元素，您无法将其分配给innerHTML。此外，参数不应包含.，这是一个选择器，而不是类名的一部分。您可以使用document.querySelector或更短的jquery来解决这两个问题：
$(".date").html(new Date().getDate());
$(".time").html(new Date().getTime());
HTML中没有id="resultLength"，所以
document.getElementById("resultLength").innerHTML = data.length;
尝试设置innerHTML的{{1}}时出错。使用jQuery，如果选择器不匹配，它将被忽略。
这是更正后的代码。
null$(document).ready(function() {
$("#searchSubmit").click(function() {
var question = {
q: $("#searchQuestion").val()
}
var data = ["mobileApp", "mobileLearning"]
console.log(data.length)
if (data.length == 0) {
console.log('un')
alertify.error("nothing found")
} else {
var info = {
searchResult: data,
serachQ: $("#searchQuestion").val()
}
$('.main').fadeOut();
console.log("hey")
$("#resultLength").html(data.length);
$("#searchQ").html(info.serachQ);
$(".date").html(new Date().getDate());
$(".time").html(new Date().getTime());
$('#searchPage').fadeIn();
for (var i = 0; i < data.length; i++) {
switch (data[i]) {
case "smartFarming":
$("#smartFarming").fadeIn();
break;
case "smartEnergyMonitoring":
$("#smartEnergyMonitoring").fadeIn()
break;
case "smartIoTbasedDigitalSignage":
$("#smartIoTBasedDigitalSignage").fadeIn();
break;
case "smartSurveySolutions":
$("#smartSurvey").fadeIn()
break;
case "smartHydroponics":
$("#smartHydroponics").fadeIn();
break;
case "smartEnvironmentalMonitoring":
$("#smartEnvironmentalMonitoring").fadeIn();
break;
case "smartBuildingManagement":
$("#smartBuildingManagement").fadeIn();
break;
case "invention":
$("#skyMicsInvention").fadeIn();
break;
case "mobileApp":
$("#mobileAppRobotechClub").fadeIn();
break;
case "mobileLearning":
$("#mobileLearning").fadeIn();
}
}
}
})
});@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700";
.container {
margin-top: 20px;
}
.mb20 {
margin-bottom: 20px;
}
hgroup {
padding-left: 15px;
border-bottom: 1px solid #ccc;
}
hgroup h1 {
font: 500 normal 1.625em "Roboto", Arial, Verdana, sans-serif;
color: #2a3644;
margin-top: 0;
line-height: 1.15;
}
hgroup h2.lead {
font: normal normal 1.125em "Roboto", Arial, Verdana, sans-serif;
color: #2a3644;
margin: 0;
padding-bottom: 10px;
}
.search-result .thumbnail {
border-radius: 0 !important;
}
.search-result:first-child {
margin-top: 0 !important;
}
.search-result {
margin-top: 20px;
}
.search-result .col-md-2 {
border-right: 1px dotted #ccc;
min-height: 140px;
}
.search-result ul {
padding-left: 0 !important;
list-style: none;
}
.search-result ul li {
font: 400 normal .85em "Roboto", Arial, Verdana, sans-serif;
line-height: 30px;
}
.search-result ul li i {
padding-right: 5px;
}
.search-result .col-md-7 {
position: relative;
}
.search-result h3 {
font: 500 normal 1.375em "Roboto", Arial, Verdana, sans-serif;
margin-top: 0 !important;
margin-bottom: 10px !important;
}
.search-result h3>a,
.search-result i {
color: #248dc1 !important;
}
.search-result p {
font: normal normal 1.125em "Roboto", Arial, Verdana, sans-serif;
}
.search-result span.plus {
position: absolute;
right: 0;
top: 126px;
}
.search-result span.plus a {
background-color: #248dc1;
padding: 5px 5px 3px 5px;
}
.search-result span.plus a:hover {
background-color: #414141;
}
.search-result span.plus a i {
color: #fff !important;
}
.search-result span.border {
display: block;
width: 97%;
margin: 0 15px;
border-bottom: 1px dotted #ccc;
}