Javascript 下拉菜单以及如何使用jQuery更改请求的图片数量

我试图使用jQuery来定位我下拉菜单中的数字列表1-50，并根据用户选择的数字，根据他们选择的数字显示特定主题的X个图像，但我不确定如何编写它

这就是我到目前为止所拥有的，我特别专注于JavaScript中的函数

numberOfDogs

：

HTML:

<div class="container">
  <h1>Pictures of Dogs</h1>
  <label>Select the number of dogs you want to see</label>
  <select id="dropdown-list" autocomplete="off">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected>3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">50</option>
  </select>
  <form>
    <input type="submit" value="Submit">
  </form>
  <section class="results hidden">
    <img class="results-img" alt="placeholder">
  </section>
</div>

狗的照片
选择要查看的狗的数量
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
`;
}
$（'.results'）.html（templateString）；
$（'.results'）.removeClass（'hidden'）；
}
函数watchForm（）{
$（'form'）。提交（事件=>{
event.preventDefault（）；
getDogImage（）；
});
}
函数numberOfDogs（）{
$（“下拉列表”）
}
$（函数（）{
console.log（'已加载应用程序！正在等待提交！'）
watchForm（）；
});

你很接近

numberOfDogs

函数可以如下所示：

'use strict';

function getDogImage() {
  fetch('https://dog.ceo/api/breeds/image/random/3')
    .then(response => response.json())
    .then(responseJson =>
      displayResults(responseJson))
    .catch(error => alert('Something went wrong. Try again later.'));
}

function displayResults(responseJson) {
  let templateString = "";
  console.log(responseJson);
  for (let i = 0; i < responseJson.message.length; i++) {
    templateString += `<img src="${responseJson.message[i]}" class="results-img">`;
  }
  $('.results').html(templateString);
  $('.results').removeClass('hidden');
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    getDogImage();
  });
}

function numberOfDogs() {
  $('dropdown-list')
}

$(function() {
  console.log('App loaded! Waiting for submit!')
  watchForm();
});

其中

numDogs

保存选定的狗的数量。在jQuery中，您应该通过使用

$（“#下拉列表”）

使用

来获取

下拉列表

选择

元素

getDogImage

函数可以有一个

numDogs

参数。然后，您可以在url请求中发送狗的数量。请参阅下面的代码：

function numberOfDogs() {
  let numDogs = $('#dropdown-list').val();
  return numDogs;
}

大概是这样的：

'use strict';

function getDogImage() {
  fetch('https://dog.ceo/api/breeds/image/random/3')
    .then(response => response.json())
    .then(responseJson =>
      displayResults(responseJson))
    .catch(error => alert('Something went wrong. Try again later.'));
}

function displayResults(responseJson) {
  let templateString = "";
  console.log(responseJson);
  for (let i = 0; i < responseJson.message.length; i++) {
    templateString += `<img src="${responseJson.message[i]}" class="results-img">`;
  }
  $('.results').html(templateString);
  $('.results').removeClass('hidden');
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    getDogImage();
  });
}

function numberOfDogs() {
  $('dropdown-list')
}

$(function() {
  console.log('App loaded! Waiting for submit!')
  watchForm();
});

（函数（）{
"严格使用",；
函数getDogImage（numDogs）{
取（'https://dog.ceo/api/breeds/image/random/“+numDogs）
.then（response=>response.json（））
.然后（responseJson=>
显示结果（responseJson））
.catch（error=>alert（'出现问题，请稍后再试'）；
}
函数显示结果（responseJson）{
让templateString=“”；
for（设i=0；i{
event.preventDefault（）；
getDogImage（numberOfDogs（））；
});
}
函数numberOfDogs（）{
设numDogs=$（“#下拉列表”）.val（）；
返回numDogs；
}
$（函数（）{
log（'已加载应用程序！正在等待提交！'）；
watchForm（）；
});
}());
。隐藏{
显示：无；
}

狗的照片
选择要查看的狗的数量
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50