试图获得一个按钮来取消隐藏图片

Question

我试图让我的HTML内的按钮显示图像，当它被点击隐藏。我是jquery/js工作的超级新手，所以任何人都可以获得的帮助是最受赞赏的。

的HTML输入字段和按钮应该断火的脚本：

<div class="col-md-3"> 
    <div>Select City</div> 
    <input type="text" id="citySelector"> 
</div> 
<button type="button" class="btn btn-primary" id="findHotel" data-dismiss="modal">Find Hotel</button> 

HTML代码将被显示的图像

<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults"> 
<table> 
    <tr> 
    <td><img src="images/hotels/chicago/chicago1.png" id="chicagoHotels"></td> 
    </tr> 
    <tr> 
    <td><img src="images/hotels/chicago/chicago2.png" id="chicagoHotels"></td> 
    </tr> 
</table> 
</div> 

CSS：

#chicagoResults { 
color: #f6f1ed; 
margin-top: 110px; 
margin-left: 180px; 
display: none; 
} 

JS：

var citySelector = $("#citySelector").val().trim(); 

$("#findHotel").click(citySearch); 
function citySearch() { 
    if (citySelector === "New York"){ 
    document.('nyResults').style.display = "block"; 
    } 
else if (citySelector === "Chicago"){ 
    document.('chicagoResults').style.display = "block"; 
} 
}); 

Answer 1

你必须纠正这些线路：

document.('nyResults').style.display = "block"; 
document.('chicagoResults').style.display = "block"; 

通过添加getElementById后document.：

document.getElementById('nyResults').style.display = "block"; 
document.getElementById('chicagoResults').style.display = "block"; 

而且你的功能应该由}结束，而不是});，你必须通过域的值到你的函数，所以添加参数到你的函数定义。

希望这会有所帮助。

---

$("body").on('click', "#findHotel", function() 
 
{ 
 
    citySearch($("#citySelector").val().trim()); 
 
}); 
 

 
function citySearch (citySelector) 
 
{ 
 
    if (citySelector === "New York") 
 
     $('#nyResults').show(); 
 
    else if (citySelector === "Chicago") 
 
     $('#chicagoResults').show(); 
 
}

#chicagoResults, #nyResults { 
 
    color: #f6f1ed; 
 
    margin-top: 110px; 
 
    margin-left: 180px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <div>Select City</div> 
 
    <input type="text" id="citySelector"> 
 
    <button type="button" id="findHotel">find Hotel</button> 
 
</div> 
 
    
 
<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults"> 
 
<table> 
 
    
 
    <tr> 
 
    <td><img src="https://foto.hrsstatic.com/fotos/3/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F0%2F0%2F0%2F2%2F000279%2F000279_a_3979595.jpg/Tw1WKUCVIFelYvywT6gzeQ%3D%3D/259,140/6/WYNDHAM_GRAND_CHICAGO_RIVERFRO-Chicago-Exterior_view-3-279.jpg" id="chicagoHotels"></td> 
 
    </tr> 
 
</table> 
 
</div> 
 

 
<div class="container-fluid col-md-8 col-md-offset-3" id="nyResults"> 
 
<table> 
 
    <tr> 
 
    <td><img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F7%2F5%2F547591%2F547591_z_4564886.jpg/jJ7hmPcA3%2F9wQG%2BKfy0p8g%3D%3D/560,373/6/RADISSON_BLU_AQUA_CHICAGO-Chicago-Room-21-547591.jpg" id="chicagoHotels"></td> 
 
    </tr> 
 
</table> 
 
</div>

Answer 2

尝试改变这一点：

document.('nyResults').style.display = "block"; 
document.('chicagoResults').style.display = "block"; 

这样：

$('#nyResults').show(); 
$('#chicagoResults').show(); 

终极密码：

$("#findHotel").click(function() { 
    var citySelector = $("#citySelector").val().trim(); 
    if (citySelector === "New York"){ 
    $('#nyResults').show(); 
    } else if (citySelector === "Chicago"){ 
    $('#chicagoResults').show(); 
    } 
}); 

Answer 3

我会推荐在进入图书馆之前学习javascript本身的基础知识。

话虽这么说，（尽管语法错误）有几个问题与您的代码：

---

点击事件定义一个函数，但永远不会调用它。

您需要为其内部的代码调用一个函数来执行。

---

您正在使用表来保存您的布局。

A <Table>用于演示目的的标记是良好网页设计的祸害。使用div并将它们设置为表格，如果需要，可以使用display: table和display: table-cell，但不要使用<Table>标记，除非您使用表格数据填充它。

$(function(){ 
 
    var findButton = $("#find-button"); 
 
    var chicagoResults = $("#chicagoResults"); 
 

 
    findButton.on("click", function(){ 
 
     var input = $("#city-selector").val().trim().toLowerCase(); 
 

 
     if(input === "chicago"){ 
 
      chicagoResults.css({display: "block"}); 
 
     } 
 
     else if(input === "new york"){ 
 
      //show new york block 
 
     } 
 
    }); 
 
});

#chicagoResults { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <div>Select City</div> 
 
    <input type="text" id="city-selector"> 
 
</div> 
 
    
 
<button id="find-button">FindHotel</button> 
 
    
 
    
 
    
 
<div class="container-fluid col-md-8 col-md-offset-3" id="chicagoResults"> 
 
    <p>yay</p> 
 
</div>