試圖獲得一個按鈕來取消隱藏圖片

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>