[我正在尝试使我的jquery' '+ searchHistory +' '每次搜索都换行/

Question

[我试图以每次搜索新城市和新]的方式设置代码，以使列表井井有条。我试图添加close标签，并且没有运气的br。

[如果有人能让我知道我要去哪里错了，我将不胜感激。

我也将我的代码添加到了一个代码笔中，如果这样更容易：https://codepen.io/rob-connolly/pen/YzXPjjz

这里是问题的图片：

$(document).ready(function() {
  let searchHistory = [];




  $('#submitWeather').click(function(e) {
    e.preventDefault();
    var city = $('#city').val();
    searchHistory.push(city);
    $("#history").html('<li>' + searchHistory + '<br></li>')
    if (city != '') {


      //---------AJAX------------

      $.ajax({
        url: 'https://api.openweathermap.org/data/2.5/forecast?appid=34fd31758b449ea433e05058c225793c&q=' + city + "&units=imperial&count=10",
        type: "GET",
        dataType: "jsonp",
        success: function(data) {
          var widget = show(data);
          console.log("here");
          $("#show").html(widget);

          //----------- Forecast Widget ------------

          var widget2 = '';

          for (var i in data.list) {
            if (i > 0 && data.list[i].dt_txt.indexOf("12:00") > -1) {
              console.log(data.list[i].dt_txt);

              var code = [
                '<div class="col-2 day">',
                '<p>',
                data.list[i].dt_txt.split(' ')[0],
                '</p>',
                //weather icon
                '<img src="http://openweathermap.org/img/wn/' + data.list[i].weather[0].icon + '@2x.png">',
                '<p> Temp:',
                data.list[i].main.temp,
                ' degrees</p>',
                '<p> Humidity: ',
                data.list[i].main.humidity,
                '%</p>',
                '<p> Wind speed: ',
                data.list[i].wind.speed,
                ' MPH</p>',
                '</div>'
              ];

              widget2 += code.join('');
            }
          }
          $(".5day").html(widget2);
          $("#city").val('');
        }

      });
    } else {
      $("#error").html('Field cannot be empty');
    }
  });
});

function show(data) {

  console.log("show: ", data);


  // return of today's weather 
  return '<h3>' + data.city.name + ' (' + data.list[0].dt_txt.split(' ')[0] + ') </h3>' +
    '<p><strong>Temp: </strong>' + data.list[0].main.temp + ' degrees</p>' +
    '<p><strong>Humidity: </strong>' + data.list[0].main.humidity + ' %</p>' +
    '<p><strong>Wind Speed: </strong>' + data.list[0].wind.speed + ' MPH</p>';
  //second function looking for forcast data for day 1 ^^
}

body {
  background-color: rgb(213, 213, 213);
}

.day1,
.day2,
.day3,
.day4,
.day5,
.day {
  width: 220px;
  height: 200px;
  background-color: #71b4e4;
  position: relative;
  color: rgb(45, 45, 45);
  display: inline-table;
  border-style: solid;
  border-color: white;
}

.bgMain {
  margin-top: 1%;
  background: rgb(173, 201, 221);
  background: linear-gradient(90deg, rgba(173, 201, 221, 1) 0%, rgba(154, 202, 236, 1) 46%, rgba(113, 180, 228, 1) 79%, rgba(31, 124, 150, 1) 100%, rgba(0, 12, 14, 1) 100%);
  color: rgb(45, 45, 45);
  border: solid 2px white;
}

.input {
  text-align: center;
}

input[type='text'] {
  height: 50px;
  width: 200px;
  background: #e7e7e7;
}

input[type='submit'] {
  height: 50px;
  width: 100px;
  background: blue;
}

.forecastBox {
  border-style: solid;
  border-color: #e7e7e7;
  border-width: 10px;
}

#searchForm1 {
  right: 30%;
}

#city {
  left: 190%;
}

#submitWeather {
  left: 190%;
}

@media (max-width: 800px) {
  .reser {
    font-size: 14px
  }
  #history {
    font-size: 14px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Weather Dashboard</title>
</head>

<body>

  <!-- Navigation Bar -->

  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="#">Weather App</a>



    <div class=" navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto"></ul>
      <!-- this is the form for the weather search-->

      <form class="weatherSearch form-inline my-2 my-sm-0">
        <input class="form-control mr-sm-2" id="city" type="search" placeholder="Search City" aria-label="Search">
        <button id="submitWeather" class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div id="recentCity" class='col-2'>
        <h4 class="reser">Recent Searches:</h4>
        <div class="row"></div>
        <div class="cityPast" id="cityList"></div>
      </div>
      <div class='col-10'>

        <!-- Thi is the div id = show to display the weather data. -->
        <div class="bgMain" id="show">
        </div>
      </div>
    </div>

    <div class='container-fluid'>
      <div class=row>
      </div>
      <div class='col-2'></div>
    </div>
    <div class='col-8'>

    </div>
    <div class='row'>

    </div>
    <div id="5dayforcast" class='row'>
      <div id="history" class="col-2">

      </div>
      <div class="col-10">
        <h4>5 Day Forecast</h4>
        <div class="row">
          <div class="col-12 5day">

          </div>
        </div>
      </div>
      <div class="row"></div>
      <div class="col-2"></div>


    </div>
  </div>
  </div>







  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

我正在尝试以某种方式设置代码，每次我搜索一个新城市时，都会启动new来保持列表的井井有条。我试图添加close标签，并且没有运气的br。如果有人...

Answer 1

您需要在append()方法的帮助下对每个数组值使用.map()方法。在追加#history之前，需要像$("#history").html('');那样清空内容，并从存储的数组searchHistory追加最新的记录。因此，我希望下面的代码片段能对您有所帮助。

[我正在尝试使我的jquery' '+ searchHistory +' '每次搜索都换行/

问题描述投票：0回答：1

1个回答

最新问题

[我正在尝试使我的jquery' '+ searchHistory +' '每次搜索都换行/

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1