JQuery | Как отображать переменные, когда установлен соответствующий флажок

Question

Я создаю веб-сайт, который получает информацию о погоде в зависимости от местоположения, введенного пользователем. На данный момент на странице есть некоторые функции без каких-либо функций, это все еще в стадии разработки. Я прошу прощения за неаккуратный код.

У меня есть 9 флажков в верхней части формы, в которых есть информация, которая должна отображаться, и я не уверен в лучшем способе соответственно изменить вывод.

В моем файле JS есть блок, который захватывает все соответствующие данные о погоде и присваивает их переменным. Эти переменные затем используются для генерации элемента <p>, содержащего всю эту информацию. Как я могу изменить его, чтобы отображать только те переменные, которые выбраны с помощью флажков?

$(document).ready(function() {
  var inputType = 1;

  $("#Radio1").click(function() {
    $("#lbl1").text("City Name:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';


    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2,}",
      "placeholder": "Regina"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 1;
  });

  $("#Radio2").click(function() {
    $("#lbl1").text("Postal Code:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[A-Z][0-9][A-Z]",
      "placeholder": "S4X"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 2;
  });

  $("#Radio3").click(function() {
    $("#lbl1").text("Latitude:");
    $("#lbl2").text("Longitude:");
    $("#Firstbox").removeAttr("pattern");
    $("#Secondbox").removeAttr("pattern");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "number",
      "min": "-90",
      "max": "90",
      "step": "any",
      "placeholder": "50.4"
    });

    $("#Secondbox").attr({
      "type": "number",
      "min": "-180",
      "max": "180",
      "step": "any",
      "placeholder": "-105.5"
    });

    inputType = 3;
  });

  $("#SearchButton").click(function() {
    if (checkValidity()) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var SearchResponse = this.responseText;

          var obj = JSON.parse(SearchResponse);
          var city_name = obj["name"];
          var country_name = obj["sys"]["country"];
          var longitude = obj["coord"]["lon"];
          var latitude = obj["coord"]["lat"];
          var weather_description = obj["weather"][0]["description"];
          var temp = obj["main"]["temp"] - 273.15;
          var pressure = obj["main"]["pressure"];
          var humidity = obj["main"]["humidity"];
          var wind_speed = obj["wind"]["speed"];
          var wind_direction = obj["wind"]["deg"];
          var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
          var sunset = new Date(obj["sys"]["sunset"] * 1000);

          var SearchResultsHTML = "City: " + city_name + "<br />" +
            "Country: " + country_name + "<br />" +
            "Longitude: " + longitude + "<br />" +
            "Latitude: " + latitude + "<br />" +
            "Weather: " + weather_description + "<br />" +
            "Temperature: " + temp + "<br />" +
            "Pressure: " + pressure + "<br />" +
            "Humidity: " + humidity + "<br />" +
            "Wind Speed: " + wind_speed + "<br />" +
            "Wind Direction: " + wind_direction + "<br />" +
            "Sunrise: " + sunrise.toLocaleTimeString() + "<br />" +
            "Sunset: " + sunset.toLocaleTimeString() + "<br />";

          $("#SearchResults").html(SearchResultsHTML);
        }
      }



      var Firstbox = $("#Firstbox").val();
      var Secondbox = $("#Secondbox").val();

      var apiKey = "52453f34dee0d65b1a41a02656142c6b";

      if (inputType == 1) {
        var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
          "?q=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 2) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?zip=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 3) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?lat=" + Firstbox + "&lon=" + Secondbox +
          "&APPID=" + apiKey;
      }

      xhttp.open("GET", SearchString, true);
      xhttp.send();
    }
  });

  function displayError() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid) {
      if (inputType == 1 || inputType == 2) {
        alert("Country code must be 2 characters in length.");
      } else {
        alert("Longitude must be between -180 and 180");
      }
    } else {
      if (inputType == 1) {
        alert("City name must be longer than 1 character.");
      } else if (inputType == 2) {
        alert("Postal code must be 3 characters in length, following the format 'S4X'");
      } else {
        alert("Latitude must be between -90 and 90");
      }
    }
  }

  function checkValidity() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid && second.validity.valid) {
      return true;
    } else {
      displayError();
      return false;
    }
  }

  function checksSelected() {

  }
});

.validated:valid {
  background-color: #BDF0A8;
}

.validated:invalid {
  background-color: #FAC3C9;
}

.row {
  margin-bottom: 10px;
}

.ticksel {
  border: solid black 1px;
}

tr,
td {
  border: solid black 1px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">

<form id="searchForm" method="POST" action="URL">
  <div class="row col-md-12">
    <h2>OpenWeatherMap Weather Search</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h4>Search by:</h4>
      <input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
      <input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
      <input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
    </div>
    <div class="col-md-6">
      <h4>Show in search results:</h4>

      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Longitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Latitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Temperature</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Pressure</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Humidity</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Speed</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Direction</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunrise</div>
        <div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunset</div>
      </div>

    </div>
  </div>
  <div class="row col-md-12">
    <label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
    <label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
    <input id="SearchButton" type="button" value="Search" />
  </div>
</form>

<div class="row col-md-12">
  <h4>Current Weather</h4>
</div>
<div class="row col-md-12">
  <p id="SearchResults"></p>
</div>

<div class="row col-md-12">
  <table width="100%">
    <thead>
      <tr>
        <th>City</th>
        <th>Country</th>
        <th>Longitude</th>
        <th>Latitude</th>
        <th>Weather</th>
        <th>Temperature</th>
        <th>Pressure</th>
        <th>Humidity</th>
        <th>Wind Speed</th>
        <th>Wind Direction</th>
        <th>Sunrise</th>
        <th>Sunst</th>
        <th><a class="deleteAll" href="#">Clear Log</a></th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Answer 1

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

Я изменил ваш xmlhttp, чтобы получить JSON

Вы можете сделать

    let SearchResultsHTML = []
    SearchResultsHTML.push("City: " + city_name);
    SearchResultsHTML.push("Country: " + country_name);
    SearchResultsHTML.push("Weather: " + weather_description);
    if ($("#long").is(":checked")) SearchResultsHTML.push("Longitude: " + longitude);
    if ($("#lat").is(":checked")) SearchResultsHTML.push("Latitude: " + latitude);
    if ($("#temp").is(":checked")) SearchResultsHTML.push("Temperature: " + temp);
    if ($("#pres").is(":checked")) SearchResultsHTML.push("Pressure: " + pressure);
    if ($("#hum").is(":checked")) SearchResultsHTML.push("Humidity: " + humidity);
    if ($("#ws").is(":checked")) SearchResultsHTML.push("Wind Speed: " + wind_speed);
    if ($("#wd").is(":checked")) SearchResultsHTML.push("Wind Direction: " + wind_direction);
    if ($("#sunup").is(":checked")) SearchResultsHTML.push("Sunrise: " + sunrise.toLocaleTimeString());
    if ($("#sundown").is(":checked")) SearchResultsHTML.push("Sunset: " + sunset.toLocaleTimeString());
    $("#SearchResults").html(SearchResultsHTML.join("<br/>"));

или более элегантно добавить диапазон и переключать его во время показа или даже после

    let SearchResultsHTML = []
    SearchResultsHTML.push("City: " + city_name);
    SearchResultsHTML.push("Country: " + country_name);
    SearchResultsHTML.push("Weather: " + weather_description);
    SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
    SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
    SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
    SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
    SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
    SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
    SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
    SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
    SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
    $("#SearchResults").html(SearchResultsHTML.join("<br/>"));
    showSpans();
  })
}

, используя

$(".ticksel").on("change", showSpans);
function showSpans() {
  $(".ticksel input").each(function() {
    const id = this.id;
    const checked = this.checked;
    if (id) {
      const $span = $("#" + id + "span");
      if ($span) $span.toggle(checked);
    }
  })
}

$(document).ready(function() {
  var inputType = 1;

  $("#Radio1").click(function() {
    $("#lbl1").text("City Name:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';


    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2,}",
      "placeholder": "Regina"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 1;
  });

  $("#Radio2").click(function() {
    $("#lbl1").text("Postal Code:");
    $("#lbl2").text("Country Code:");
    $("#Firstbox").removeAttr("min max step");
    $("#Secondbox").removeAttr("min max step");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "text",
      "pattern": "[A-Z][0-9][A-Z]",
      "placeholder": "S4X"
    });

    $("#Secondbox").attr({
      "type": "text",
      "pattern": "[a-zA-Z]{2}",
      "placeholder": "ca"
    });

    inputType = 2;
  });

  $("#Radio3").click(function() {
    $("#lbl1").text("Latitude:");
    $("#lbl2").text("Longitude:");
    $("#Firstbox").removeAttr("pattern");
    $("#Secondbox").removeAttr("pattern");
    document.getElementById('Firstbox').value = '';
    document.getElementById('Secondbox').value = '';

    $("#Firstbox").attr({
      "type": "number",
      "min": "-90",
      "max": "90",
      "step": "any",
      "placeholder": "50.4"
    });

    $("#Secondbox").attr({
      "type": "number",
      "min": "-180",
      "max": "180",
      "step": "any",
      "placeholder": "-105.5"
    });

    inputType = 3;
  });

  $("#SearchButton").click(function() {
    if (checkValidity()) {


      var Firstbox = $("#Firstbox").val();
      var Secondbox = $("#Secondbox").val();

      var apiKey = "52453f34dee0d65b1a41a02656142c6b";

      if (inputType == 1) {
        var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
          "?q=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 2) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?zip=" + Firstbox + "," + Secondbox +
          "&APPID=" + apiKey;
      } else if (inputType == 3) {
        var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
          "?lat=" + Firstbox + "&lon=" + Secondbox +
          "&APPID=" + apiKey;
      }


      $.getJSON(SearchString, function(obj) {
        var city_name = obj["name"];
        var country_name = obj["sys"]["country"];
        var longitude = obj["coord"]["lon"];
        var latitude = obj["coord"]["lat"];
        var weather_description = obj["weather"][0]["description"];
        var temp = obj["main"]["temp"] - 273.15;
        var pressure = obj["main"]["pressure"];
        var humidity = obj["main"]["humidity"];
        var wind_speed = obj["wind"]["speed"];
        var wind_direction = obj["wind"]["deg"];
        var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
        var sunset = new Date(obj["sys"]["sunset"] * 1000);

        let SearchResultsHTML = []
        SearchResultsHTML.push("City: " + city_name);
        SearchResultsHTML.push("Country: " + country_name);
        SearchResultsHTML.push("Weather: " + weather_description);
        SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
        SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
        SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
        SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
        SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
        SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
        SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
        SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
        SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
        $("#SearchResults").html(SearchResultsHTML.join("<br/>"));
        showSpans();
      })
    }



  });

  $(".ticksel").on("change", showSpans);

  function showSpans() {
    $(".ticksel input").each(function() {
      const id = this.id;
      const checked = this.checked;
      if (id) {
        const $span = $("#" + id + "span");
        if ($span) $span.toggle(checked);
      }
    })
  }

  function displayError() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid) {
      if (inputType == 1 || inputType == 2) {
        alert("Country code must be 2 characters in length.");
      } else {
        alert("Longitude must be between -180 and 180");
      }
    } else {
      if (inputType == 1) {
        alert("City name must be longer than 1 character.");
      } else if (inputType == 2) {
        alert("Postal code must be 3 characters in length, following the format 'S4X'");
      } else {
        alert("Latitude must be between -90 and 90");
      }
    }
  }

  function checkValidity() {
    var first = document.getElementById('Firstbox');
    var second = document.getElementById('Secondbox');

    if (first.validity.valid && second.validity.valid) {
      return true;
    } else {
      displayError();
      return false;
    }
  }

  function checksSelected() {

  }
});

.validated:valid {
  background-color: #BDF0A8;
}

.validated:invalid {
  background-color: #FAC3C9;
}

.row {
  margin-bottom: 10px;
}

.ticksel {
  border: solid black 1px;
}

tr,
td {
  border: solid black 1px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">

<form id="searchForm" method="POST" action="URL">
  <div class="row col-md-12">
    <h2>OpenWeatherMap Weather Search</h2>
  </div>
  <div class="row">
    <div class="col-md-6">
      <h4>Search by:</h4>
      <input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
      <input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
      <input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
    </div>
    <div class="col-md-6">
      <h4>Show in search results:</h4>

      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="long" value="yes"> Longitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="lat" value=""> Latitude</div>
        <div class="col ticksel"><input type="checkbox" checked id="temp" value=""> Temperature</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="press" value=""> Pressure</div>
        <div class="col ticksel"><input type="checkbox" checked id="hum" value=""> Humidity</div>
        <div class="col ticksel"><input type="checkbox" checked id="ws" value=""> Wind Speed</div>
      </div>
      <div class="row">
        <div class="col ticksel"><input type="checkbox" checked id="wd" value=""> Wind Direction</div>
        <div class="col ticksel"><input type="checkbox" checked id="sunup" value=""> Sunrise</div>
        <div class="col ticksel"><input type="checkbox" checked id="sundown" value=""> Sunset</div>
      </div>

    </div>
  </div>
  <div class="row col-md-12">
    <label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
    <label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
    <input id="SearchButton" type="button" value="Search" />
  </div>
</form>

<div class="row col-md-12">
  <h4>Current Weather</h4>
</div>
<div class="row col-md-12">
  <p id="SearchResults"></p>
</div>

<div class="row col-md-12">
  <table width="100%">
    <thead>
      <tr>
        <th>City</th>
        <th>Country</th>
        <th>Longitude</th>
        <th>Latitude</th>
        <th>Weather</th>
        <th>Temperature</th>
        <th>Pressure</th>
        <th>Humidity</th>
        <th>Wind Speed</th>
        <th>Wind Direction</th>
        <th>Sunrise</th>
        <th>Sunst</th>
        <th><a class="deleteAll" href="#">Clear Log</a></th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>