如何使用完成的排序功能

I made a sort function in alphabetical order. I check her work through "console.log()". I sort of object. I have a question. how to make the function work when you select to "select>option". in "console.log()" it shows that the object is sorted. I want to when you select "select"> 'In alphabet order' blocks on the page rebuilt alphabetically. how to do it?

我按字母顺序排序。我通过“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>

or at codepen

或者在codepen

1 个解决方案

#1

The sort handler should be moved to global scope and sort button should be able to call it on click. To render the content either on ajax load or on sort I moved the page render related actions under a function named 'renderResults'.

排序处理程序应该移动到全局范围，排序按钮应该能够在单击时调用它。要在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>