如何根據輸入值更改JS中的背景圖像？

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

1. 正如@GifCo所提到的，您需要在.click .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> 

需要考慮的一些額外信息...

用戶鍵入的數據可能無法預測。 將文本（字符串）更改為全部大寫或全部小寫之后，可能值得研究一下比較。

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

但是，用戶填寫表格的方式還有很多無法預測的方式。 紐約，紐約，紐約，紐約，大蘋果，大蘋果，...

如果可能的話，我建議您選擇一個清單

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>