Question

我想根据用户键入的输入来更改站点的背景图像。例如，如果用户键入纽约或纽约市或NYC，则背景图像将变为NYC图片。

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

如@GifCo所述，您需要在event中传递.click( function(event) )，以便代码的目标是preventDefault（否则它将只提交整个页面作为标准HTML表单。
在您的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

Answer 2

背景图片的CSS属性为background-image: url("image.gif"); 因此，您的jQuery语句如下所示： $('body').css('background-image', 'url(../images/nyc.jpg)').css('background-repeat', 'no-repeat');

Answer 3

由于您使用的是表单，因此与单击相比，提交将是更好的事件处理程序。比较字符串时，一个好习惯是使用trim和toLowerCase删除外部空格并允许不区分大小写的搜索。我还使用了indexOf而不是一堆字符串比较。

$('#cityForm').submit(function(event) {
  event.preventDefault();
  var city = $('#city-type').val().trim().toLowerCase();
  $('#city-type').val('');
  cityBackground(city)
});

function cityBackground(city) {
  console.log(city);
  if (['new york', 'new york city', 'nyc'].indexOf(city) != -1) {
    $('body').css('background', 'red');
  } else if (['bay area', 'san fransisco', 'sf'].indexOf(city) != -1) {
      $('body').css('background', 'gray');
    }
  }

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

Answer 4

看起来您有很多答案，这是我的方法。至少您可以选择自己喜欢的东西，并从中学习一些东西。

$('#cityForm').on('submit', changeBg);

function changeBg(e) {
  e.preventDefault();
  switch($('#city-type').val()) {
    case 'nyc':
      $('body').css('background-image', "url('https://media.cntraveler.com/photos/5a8f3b070e2cf839e9dbfa1d/master/w_1200,c_limit/NYC_GettyImages-640006562.jpg')");
      break;
    case 'tokyo':
      $('body').css('background-image', "url('https://cdn-images-1.medium.com/max/2400/1*vOrfclMVms7S4608zxC-ig.jpeg')");
      break;
    default:
      $('body').css('background-image', 'none');
      
  }
  
  $('#city-type').val('');
  

}

body {
 background-repeat: no-repeat;
 background-position: center center;
}

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

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

4 个答案: