如何使用成品排序功能

Question

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

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>