Как создать выпадающий список, который меняет фон вашего сайта, используя Javascript? - PullRequest
Новая
       3

Как создать выпадающий список, который меняет фон вашего сайта, используя Javascript?

1 голос
/ 15 июня 2019

Я работаю над заданием, которое требует изменения фона веб-сайта в зависимости от выбранного параметра раскрывающегося списка.то есть.Если выбрано «NYC», фон изменится на фотографию NYC, где относительный URL-адрес изображения уже в CSS.

Мне необходимо добавить параметры города, используя массив со значениями «NYC»,SF, LA, ATX, SYD, использующие цикл for в JS, вместо добавления его непосредственно в HTML.Меня также просят включить в код JS $ .append (), $ .attr (), $ .val (), $ .change () и оператор if / else if.

I 'Мы пытались написать код с нуля вместе с помощью других источников, но предварительно написанные коды не работают с моими конкретными требованиями.Я понимаю HTML и CSS, но я все еще очень плохо знаком с Javascript и JQuery.Достаточно знать, что это неправильно.Я определенно не получил правильный код для цикла for или выпадающего меню.

Вот HTML: 

<body>
<header>
    <div class="title">
        <h1>CitiPix</h1>
        <p>Your Cities, Your Pix</p>
    </div>
</header>
    <div class="container">
    <form>
        <select id="city-type">
            <option>Select a City</option>
        </select>
    </form>
    </div>
</body>

Это JS, который у меня есть:

$(document).ready(function(){

$('.container').click(function(event){
  var cityName = ['NYC, SF, LA, ATX, SYD'];
  $("#city-type").append(var cityName);
  cityBackground(city);
  if (!event.target.matches('#submit-btn')) {
  var dropdowns = document.getElementsByClassName('city-type');
  var i;
  for (i = 0; i < container.length; i++) {
}}}

$('select').change(displayVals);
displayVals();

function displayVals() {
    var cityName = $( "#city-type" ).val();

function cityBackground(citytype){
    if (citytype === 'NYC') 
  {
      $('body').attr('class', 'nyc');
  }
  else if (citytype === 'SF')
  {
     $('body').attr('class', 'sf');
  }
  else if (citytype === 'LA')
  {
     $('body').attr('class', 'la');
  }
  else if (citytype === 'ATX')
  {
     $('body').attr('class', 'austin');
  }
  else if (citytype === 'SYD')
  {
     $('body').attr('class', 'sydney');
  }
  }
}

Раскрывающееся меню не отображается, оно просто показывает текст «Выберите город» и весь раскрывающийся код не работает.Требования .change и .val также вводят в заблуждение относительно того, где он должен вписываться в код.

Ответы [ 2 ]

1 голос
/ 15 июня 2019

циклический цикл

Нет ничего плохого в вашем цикле, вы просто ничего не делаете внутри цикла. Вам необходимо добавить элемент select из цикла, который вы определили. 

// Cycle through the array
for (i = 0; i < cityName.length; i++) {

  // Code to be repeated for each element goes here

}

Добавление к выбору

Проверьте этот ответ для способов добавления опций в select: Добавление параметров в

В приведенном ниже примере я использовал следующую строку, но могут быть некоторые проблемы в IE, которые вам нужно будет изучить, или использовать альтернативу, предложенную в принятом ответе. 

$("select").append(new Option("text", "value"));

Сбор выбранного значения

Вы можете получить значение select, используя .val() - т.е. $("#select").val() предоставит значение выбранной опции. Вы уже делаете это правильно.

Управление классами

Вы можете добавить класс к элементу, используя .addClass("classname");

Вы можете сбросить все классы, установив атрибут класса в пустую строку, т. Е. .attr("class", ""), или назначить классы, указав второй аргумент вместо пустой строки.

Использование .attr("class", "NYC") фактически позволяет вам объединить эти шаги в одну команду. Вы уже делаете это правильно.

Демо 

// Create array of cities
var cityName = ["NYC", "SF"];

// Cycle through the array
for (i = 0; i < cityName.length; i++) {

  // Add options to the select
  $("#city-type").append(new Option(cityName[i], cityName[i]));
  
}



// Add change event to select
$("#city-type").change(function() {

  // Clear classes on the body and assign new value
  $("body").attr("class", $(this).val() );

});
.NYC {
  background: blue;
}

.SF {
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <header>
    <div class="title">
      <h1>CitiPix</h1>
      <p>Your Cities, Your Pix</p>
    </div>
  </header>
  <div class="container">
    <form>
      <select id="city-type">
        <option>Select a City</option>
      </select>
    </form>
  </div>
</body>
0 голосов
/ 15 июня 2019

В вашем Javascript есть несколько синтаксических ошибок, многие скобки и скобки не закрыты, некоторые функции вызываются до их объявления.

Это частичное решение вашей проблемы: https://jsfiddle.net/jkpdLuho/1/

$(document).ready(function() {
  var places = ['NYC', 'SYD']
  for (i = 0; i < places.length; i++) {
    $('select').append('<option value="' + places[i] + '">' + places[i] + '</option>')
  }

  $('select').on('change', function() {
    $('body').attr("class", this.value)
  })
})

<html>
  <header>
    <div class="title">
      <h1>CitiPix</h1>
      <p>Your Cities, Your Pix</p>
    </div>
  </header>

  <body>
    <form>
      <select id="city-type">
        <option>Select a City</option>
      </select>
    </form>
  </body>
</html>

.NYC {
  background: yellow;
}

.SYD {
  background: pink;
}

Я бы порекомендовал использовать редактор кода, который правильно делает отступ для вашего кода (например, AtomBeautify , если вы используете Atom ), так будет легче заметить любые незакрытые заявления. Когда дело доходит до изучения jQuery, также неплохо бы поиграть с помощью консоли разработчика браузера, чтобы увидеть, как команды jQuery влияют на DOM. Например, вы увидите, что вам нужно выписать весь HTML-элемент, если вы выполните $('select').append('<option>Name</option>').

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...