演示

Question

我正在处理一项工作，该工作要求网站的背景根据所选的下拉选项进行更改。即。如果选择“ NYC”，则背景将更改为NYC的照片，其中图像的相对URL已在CSS中。

我需要使用在JS中使用“ for循环”的值“ NYC，SF，LA，ATX，SYD”的数组添加城市选项，而不是直接将其添加到HTML。我还被要求在JS代码中专门包含$ .append（），$。attr（），$。val（），$。change（）和if / else if语句。

我尝试从头开始编写代码，并从其他来源获得帮助，但是预先编写的代码无法满足我的特定要求。我了解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要求也使它们在代码中适合的位置感到困惑。

Answer 1

循环循环

您的循环实际上没有任何问题，您在循环内什么也没做。您需要从定义的循环中添加到select元素。

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

  // Code to be repeated for each element goes here

}

添加到选择

检查以下答案以了解向select添加选项的方法： Adding options to a <select> using jQuery?

在下面的示例中，我使用了以下内容，但是IE中可能需要探索一些问题，或者使用公认的答案所建议的替代方法。

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

收集选择值

您可以使用select获得.val()的值-即$("#select").val()将提供所选选项的值。 您已经正确执行了此操作。

操作课程

您可以使用.addClass("classname");

将类添加到元素

您可以通过将class属性设置为空字符串（即.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>

Answer 2

您的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有什么影响。例如，您将看到如果执行$('select').append('<option>Name</option>')，则需要写出整个HTML元素。

如何使用Javascript创建下拉菜单来更改网站背景？

2 个答案:

循环循环

添加到选择

收集选择值

操作课程

演示