javascript - 如何根据输入值更改JS中的背景图像？

Question

我想根据用户输入的内容更改网站的背景图像。例如，如果用户输入纽约或纽约市或纽约市，则背景图像将更改为纽约市的图片。

我对 JS 很陌生，还没有掌握它的窍门。我尝试使用 if/else if 和 || 运算符作为输入，但似乎不起作用。

<div class="container">
  <form>
    <input type="text" id="city-type" placeholder="Enter a city name...">
    <input type="submit" value="Update" id="submit-btn">
  </form>
</div>

$(document).ready(function() {
  $('.container').click(function() {
    event.preventDefault();
    var city = $('#city-type').val();
    $('#city-type').val('');
  });

  function cityBackground(citytype) {
    if (citytype === 'New York' || citytype === 'New York City' || citytype === 'NYC') {
      $('body').css('background', '../images/nyc.jpg') no - repeat;
    } else if (citytype === 'San Francisco' || citytype === 'SF' || citytype === 'Bay Area') {
      $('body').css('background', '../images/sf.jpg') no - repeat;
    }
  });

Answer 1

1. 正如 @GifCo 所提到的，您需要在 .click( function(event) ) 中传递一个 event ，以便代码的目标为 preventDefault(否则它只会将整个页面作为标准 HTML 表单提交。

2. 在 click 中，您需要调用 cityBackground 函数并向其传递您要衡量代码的值。

   <

$(document).ready(function() {

  $('.container').click(function(event) {
    event.preventDefault();
    var city = $('#city-type').val();
    cityBackground(city);
    $('#city-type').val('');
  });

  function cityBackground(citytype) {
    if (citytype === 'New York' || citytype === 'New York City' || citytype === 'NYC') {
      // $('body').css('background-image', '../images/nyc.jpg');
      console.log( 'New York City' );
    } else if (citytype === 'San Francisco' || citytype === 'SF' || citytype === 'Bay Area') {
      // $('body').css('background-image', '../images/sf.jpg');
      console.log( 'San Francisco' );
    }
  }
  
});

body{
  background-image: url( '' );
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <form>
    <input type="text" id="city-type" placeholder="Enter a city name...">
    <input type="submit" value="Update" id="submit-btn">
  </form>
</div>

需要考虑的一些额外信息...

用户输入的数据可能无法预测。将文本(字符串)更改为所有 uppercase 后可能值得进行比较。或全部lowercase 。

var city = ( $('#city-type').val() ).toUpperCase();
// ...
if( citytype === 'NEW YORK' || ... || ... )

但是用户也可以通过许多不可预测的方式填写表单。纽约，纽约市，纽约，纽约市，大苹果，大苹果，...

如果可能的话，我会推荐select list