时间戳

首页 > 解决方案 > 我正在尝试制作我的 jquery '

  • '+搜索历史+'
    • ' 每次搜索都换行/

    jquery - 我正在尝试制作我的 jquery '
  • '+搜索历史+'
    • ' 每次搜索都换行/

    问题描述

    我正在尝试以一种方式设置我的代码，每次我搜索一个新城市和新的

  • 开始保持列表井井有条。我试图添加关闭标签，以及没有运气的 br。

    如果有人可以让我知道我哪里出错了，我将不胜感激。

    如果这更容易，我还将我的代码添加到 codepen： 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>

    • 标签： jqueryhtmlcss

    解决方案

    您将需要借助append()方法对每个数组值使用.map()方法。在追加之前需要#history内容为空$("#history").html('');，并从存储的数组中追加新的+以前的记录searchHistory。
    所以我希望下面的片段能帮助你。

    console.log(searchHistory);
$("#history").html('');
searchHistory.map(function(result){
    $("#history").append('<li>' + result + '<br></li>');
});
// $("#history").html('<li>' + searchHistory + '<br></li>');


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

  $('#submitWeather').click(function(e) {
    e.preventDefault();
    var city = $('#city').val();
    searchHistory.push(city);
    
    console.log(searchHistory);
    $("#history").html('');
    searchHistory.map(function(result){
    	$("#history").append('<li>' + result + '<br></li>');
    });

    // $("#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;
  }
}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- 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>

    推荐阅读