javascript - 如何使用成品排序功能

Question

我按字母顺序做了一个排序函数。我通过“console.log()”检查她的工作。我有点反对。我有个问题。当您选择“选择>选项”时如何使该功能起作用。在“console.log()”中它显示对象已排序。当您选择“选择”>“按字母顺序”页面上的 block 时，我想按字母顺序重建。怎么做？

function getData(url, callback) {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      try {
        var data = JSON.parse(xmlhttp.responseText);
      } catch (err) {
        console.log(err.message + " in " + xmlhttp.responseText);
        return;
      }
      callback(data);
    }
  };

  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

var results = [];
getData('https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture',
  function(data) {

    var html = '';
    for (var i = 0; i < data["results"].length; i++) {
      var fullName = data["results"][i]["name"]["title"] + ' ' + data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"],
        name = data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"];
        img = data["results"][i]["picture"]["large"],
        imgM = data["results"][i]["picture"]["medium"];
      html += '<div class="col-md-2 block__user_on" onclick="myModal(this.id)" id="' + [i] + '"> ';
      html += '<img class="large" src="' + img + '" title="' + name + '"/>';
      html += '<img class="medium" id="medium" src="' + imgM + '" title="' + name + '"/>';
      html += '<p class="block__user_on-capitalize name">' + name + '</p>';
      html += '<p class="block__user_on-capitalize fullName">' + fullName + '</p>';
      html += '</div>'; 
    }
    document.getElementById("user").innerHTML = html;
    results = data["results"];

//SORT
    console.log( 
        results.sort(function (obj1, obj2){
            if (obj1.name.first < obj2.name.first) return -1;
            if (obj1.name.first > obj2.name.first) return 1;
            return 0;}
        )
    );

        }
    );

function imgMedium(){
    var large = document.getElementsByClassName("large");
    for (i = 0; i < large.length; i++) {
        large[i].style.display = 'none';
    }
    var medium = document.getElementsByClassName("medium");
    for (i = 0; i < medium.length; i++) {
        medium[i].style.display = 'block';
    }
}

function fullName(){
    var name = document.getElementsByClassName("name");
    for (i = 0; i < name.length; i++) {
        name[i].style.display = 'none';
    }
    var fullName = document.getElementsByClassName("fullName");
    for (i = 0; i < fullName.length; i++) {
        fullName[i].style.display = 'block';
    }
}


function myModal(index) {

    var data = results[index];
    document.getElementById("Modal").style.display = "block";
    var modal = '',
        name = data.name.title + ' ' + data.name.first + ' ' + data.name.last,
        img = data.picture.large,
        street = data.location.street,
        state = data.location.state,
        email = data.email,
        phone = data.phone;

    modal += '<div > ';
    modal += '<img src="' + img + '" title="' + name + '"/>';
    modal += '<p class="block__user_on-capitalize block__user_on_bold">' + name + '</p>';
    modal += '<p class="block__user_on-capitalize"><i class="fa fa-street-view" aria-hidden="true"></i>' + ' ' + street + '</p>';
    modal += '<p class="block__user_on-capitalize"><i class="fa fa-home" aria-hidden="true"></i>' + ' ' + state + '</p>';
    modal += '<p class="block__user_modal_email"><i class="fa fa-envelope-o" aria-hidden="true"></i>' + ' <a href="mailto:' + email + '"> ' + email + ' </a></p>';
    modal += '<p class="block__user_on-capitalize"><i class="fa fa-phone" aria-hidden="true"></i>' + ' <a href="tel:' + phone + '">'+ phone +'</a></p>';
    modal += '</div>';  

    document.getElementById("userModal").innerHTML = modal;

}
function closeModal() {
    document.getElementById("Modal").style.display = "none";
}

body{
    background: #eee;
}
a{
    color: #fff !important;
}
.block__user_on{
    border: 1px solid #000;
    padding: 5px;
    margin: 5px;
    background: #e2e2e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.block__user_on:hover{
    border: 1px solid #f39c12;
}
.block__user{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.block__user_on-capitalize{
    text-transform: capitalize;
}
.block__user_on-capitalize:hover, .block__user_modal_email:hover{
    text-decoration: underline;
    cursor: pointer;
}

.block__user_on_bold{
    font-weight: 700;
}
.blok__user_background_modal{
    width: 100%;
    height: 100%;
    display: none;
}
.block__user_modal{
    position: fixed;
    display: none;
    top: 10vh;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 300px;
    height: auto;
    border: 1px solid #000;
    background: #708090;
    color: #fff;
    padding: 10px;
}
.block__user_modal_close{
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    padding: 0 5px;
    color: #fff;
    cursor: pointer;
}
.block__user_modal_close:hover{
   background: #eee;
   color: #000;
   border-radius: 10px;
}
.block__sort{
    background: #e2e2e2;
    padding: 10px 0;
    border: 1px solid;
}
.block__sort ul{
    display: flex;
    justify-content: space-around;
    list-style-type: none;
}
.block__sort ul li a{
    color: #000 !important;
    cursor: pointer;
    border: 1px solid #000;
    padding: 5px;
    text-decoration: none;
}
.block__sort ul li a:hover{
     border: 1px solid #f39c12;
}
.large, .name{
    display: block;
}
.medium, .fullName{
    display: none;
}

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <title>Api random</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <div class="container-fluid" id="container-fluid" >
        <div class="row">
            <div class="container">
                <div class="block__sort">
                    <ul>
                        <li>Filter:</li>
                        <li><a onclick="imgMedium(this)">picture.medium</a></li>
                        <li><a onclick="fullName(this)">name format</a></li>
                        <li><a onclick="reverseSort(this)">sort</a></li>
                        <li><select name="" id="">
                            <option disabled selected>order</option>
                            <option>In alphabet order</option>
                            <option onclick="reverseSort(this)">In reverse order</option>
                        </select></li>
                    </ul>
                </div>
                <div class="row">
                    <div class="block__user" id="user">
                    </div>
                    <div class="block__user_modal" id="Modal">
                        <span class="block__user_modal_close" id="closeModal" onclick="closeModal(this)"><i class="fa fa-times" aria-hidden="true"></i></span>
                        <div id="userModal"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

或者 at codepen

Answer 1

排序处理程序应该移动到全局范围并且排序按钮应该能够在单击时调用它。为了在 ajax 加载或排序时呈现内容，我将页面呈现相关操作移动到名为“renderResults”的函数下。

function getData(url, callback) {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      try {
        var data = JSON.parse(xmlhttp.responseText);
      } catch (err) {
        console.log(err.message + " in " + xmlhttp.responseText);
        return;
      }
      callback(data);
    }
  };

  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

function renderResults(data) {

  var html = '';
  for (var i = 0; i < data["results"].length; i++) {
    var fullName = data["results"][i]["name"]["title"] + ' ' + data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"],
      name = data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"];
    img = data["results"][i]["picture"]["large"],
      imgM = data["results"][i]["picture"]["medium"];
    html += '<div class="col-md-2 block__user_on" onclick="myModal(this.id)" id="' + [i] + '"> ';
    html += '<img class="large" src="' + img + '" title="' + name + '"/>';
    html += '<img class="medium" id="medium" src="' + imgM + '" title="' + name + '"/>';
    html += '<p class="block__user_on-capitalize name">' + name + '</p>';
    html += '<p class="block__user_on-capitalize fullName">' + fullName + '</p>';
    html += '</div>';
  }
  document.getElementById("user").innerHTML = html;
  results = data["results"];

}

var results = [];
getData('https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture', renderResults);

//SORT
function sort() {
  var reverse = document.getElementById('order').selectedIndex == 2;
  results.sort(function(obj1, obj2) {
    var ret = 0;
    if (obj1.name.first < obj2.name.first) ret = -1;
    if (obj1.name.first > obj2.name.first) ret = 1;
    return ret * (reverse ? -1 : 1);
  });
  console.log(results);
  renderResults({
    results: results
  });
}

function imgMedium() {
  var large = document.getElementsByClassName("large");
  for (i = 0; i < large.length; i++) {
    large[i].style.display = 'none';
  }
  var medium = document.getElementsByClassName("medium");
  for (i = 0; i < medium.length; i++) {
    medium[i].style.display = 'block';
  }
}

function fullName() {
  var name = document.getElementsByClassName("name");
  for (i = 0; i < name.length; i++) {
    name[i].style.display = 'none';
  }
  var fullName = document.getElementsByClassName("fullName");
  for (i = 0; i < fullName.length; i++) {
    fullName[i].style.display = 'block';
  }
}


function myModal(index) {

  var data = results[index];
  document.getElementById("Modal").style.display = "block";
  var modal = '',
    name = data.name.title + ' ' + data.name.first + ' ' + data.name.last,
    img = data.picture.large,
    street = data.location.street,
    state = data.location.state,
    email = data.email,
    phone = data.phone;

  modal += '<div > ';
  modal += '<img src="' + img + '" title="' + name + '"/>';
  modal += '<p class="block__user_on-capitalize block__user_on_bold">' + name + '</p>';
  modal += '<p class="block__user_on-capitalize"><i class="fa fa-street-view" aria-hidden="true"></i>' + ' ' + street + '</p>';
  modal += '<p class="block__user_on-capitalize"><i class="fa fa-home" aria-hidden="true"></i>' + ' ' + state + '</p>';
  modal += '<p class="block__user_modal_email"><i class="fa fa-envelope-o" aria-hidden="true"></i>' + ' <a href="mailto:' + email + '"> ' + email + ' </a></p>';
  modal += '<p class="block__user_on-capitalize"><i class="fa fa-phone" aria-hidden="true"></i>' + ' <a href="tel:' + phone + '">' + phone + '</a></p>';
  modal += '</div>';

  document.getElementById("userModal").innerHTML = modal;

}

function closeModal() {
  document.getElementById("Modal").style.display = "none";
}

body {
  background: #eee;
}
a {
  color: #fff !important;
}
.block__user_on {
  border: 1px solid #000;
  padding: 5px;
  margin: 5px;
  background: #e2e2e2;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.block__user_on:hover {
  border: 1px solid #f39c12;
}
.block__user {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.block__user_on-capitalize {
  text-transform: capitalize;
}
.block__user_on-capitalize:hover,
.block__user_modal_email:hover {
  text-decoration: underline;
  cursor: pointer;
}
.block__user_on_bold {
  font-weight: 700;
}
.blok__user_background_modal {
  width: 100%;
  height: 100%;
  display: none;
}
.block__user_modal {
  position: fixed;
  display: none;
  top: 10vh;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 300px;
  height: auto;
  border: 1px solid #000;
  background: #708090;
  color: #fff;
  padding: 10px;
}
.block__user_modal_close {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  padding: 0 5px;
  color: #fff;
  cursor: pointer;
}
.block__user_modal_close:hover {
  background: #eee;
  color: #000;
  border-radius: 10px;
}
.block__sort {
  background: #e2e2e2;
  padding: 10px 0;
  border: 1px solid;
}
.block__sort ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}
.block__sort ul li a {
  color: #000 !important;
  cursor: pointer;
  border: 1px solid #000;
  padding: 5px;
  text-decoration: none;
}
.block__sort ul li a:hover {
  border: 1px solid #f39c12;
}
.large,
.name {
  display: block;
}
.medium,
.fullName {
  display: none;
}

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <meta charset="UTF-8">
  <title>Api random</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
  <div class="container-fluid" id="container-fluid">
    <div class="row">
      <div class="container">
        <div class="block__sort">
          <ul>
            <li>Filter:</li>
            <li><a onclick="imgMedium(this)">picture.medium</a>
            </li>
            <li><a onclick="fullName(this)">name format</a>
            </li>
            <li><a onclick="sort(this)">sort</a>
            </li>
            <li>
              <select onchange="sort()" name="" id="order">
                <option disabled selected>order</option>
                <option>In alphabet order</option>
                <option>In reverse order</option>
              </select>
            </li>
          </ul>
        </div>
        <div class="row">
          <div class="block__user" id="user">
          </div>
          <div class="block__user_modal" id="Modal">
            <span class="block__user_modal_close" id="closeModal" onclick="closeModal(this)"><i class="fa fa-times" aria-hidden="true"></i></span>
            <div id="userModal"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>