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的基础知识。

话虽如此，（尽管存在语法错误）但您的代码存在一些问题：

您的点击事件定义了一个功能，但从不调用它。

你需要为其中的代码调用一个函数来执行。

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

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

＆＃13;

$(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
      }
  });
});

＆＃13;

#chicagoResults {
  display: none;
}

＆＃13;

<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>

＆＃13;

试图取消按钮取消隐藏图片

3 个答案: