Question

我如何根据价格＆amp;对于以下html脚本使用javaScript的酒店列表的距离。我是javaScript的新手，我知道在按价格排序＆amp;按钮上使用 onclick（） 按距离排序我能做到。但我不知道如何编写javascript函数来进行排序。

<html>
    <head>
    </head>
    <body>
    <div id="contentContainer">
      <div id="content">
        <div>
          <div class="price">1211</div>
          <div class="image"><img src="image/1.jpg" alt="hotelName1" /></div>
          <div class="distance">20</div>
        </div>

        <div>
          <div class="price">23</div>
          <div class="image"><img src="image/2.jpg" alt="hotelName2"  /></div>
          <div class="distance">10</div>
        </div>

        <div>
          <div class="price">1010</div>
          <div class="image"><img src="image/3.jpg" alt="hotelName3"  /></div>
          <div class="distance">50</div>
        </div>

        <div>

          <div class="price">124</div>
          <div class="image"><img src="image/4.jpg" alt="hotelName4"  /></div>
          <div class="distance">60</div>
         </div>
       </div>
    </div>
    <button id="byPrice">sort by price</button>
    <button id="byDistance">sort by distance</button>
    </body>
    </html>

Answer 1

你可以使用javascripts排序功能

function onClickPrice()
{
    sort(priceArray);
}

function sort(array)
{
    array.sort(function(a, b){return a-b});
}

Answer 2

步骤1-2-3：

获取元素。
对它们进行排序。
按排序顺序将元素放置到DOM。

基于您的代码的修改演示：

＆＃13;

function sort(id) {
  var content = document.querySelector('#content');
  var els = Array.prototype.slice.call(document.querySelectorAll('#content > div'));
  var desc = document.querySelector('input').checked;
  var cls;

  if (id === 'byPrice') {
    cls = 'price';
  } else if (id === 'byDistance') {
    cls = 'distance';
  }

  els.sort(function(a, b) {
    na = parseInt(a.querySelector('.' + cls).innerHTML);
    nb = parseInt(b.querySelector('.' + cls).innerHTML);
    return desc ? (nb - na) : (na - nb);
  });

  els.forEach(function(el) {
    content.appendChild(el);
  });
}

＆＃13;

#content > div {
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  display: inline-block;
}
.price:before {
  content: 'Price: ';
}
.distance:before {
  content: 'Distance: ';
}

＆＃13;

<div id="contentContainer">
  <div id="content">
    <div>
      <div class="price">1211</div>
      <div class="distance">20</div>
    </div>

    <div>
      <div class="price">23</div>
      <div class="distance">10</div>
    </div>

    <div>
      <div class="price">1010</div>
      <div class="distance">50</div>
    </div>

    <div>
      <div class="price">124</div>
      <div class="distance">60</div>
    </div>
  </div>
</div>
<button id="byPrice" onclick="sort(this.id)">sort by price</button>
<button id="byDistance" onclick="sort(this.id)">sort by distance</button>
<label><input type="checkbox"> Descendant</label>

＆＃13;

但是，我建议您使用<table>，因为您可能会代表表格数据。

Answer 3

尝试

var divs = $("#content div:not([class])");
var items = $.map(divs, function(el) {
    var elem = $(el);
    return {
        price: Number(elem.find(".price").text()),
        distance: Number(elem.find(".distance").text())
    }
});
var j = function(type)  {
    return items.sort(function(a, b) {
      return a[type] - b[type]
    })
};

$("button").on("click", function(e) {
    var el = e.target.id.toLowerCase().substring(2);
    var res = $.map(j(el), function(value, i) {          
          return value[el]
    });
    var filtered = function() {
        $.each(res, function(i, sortType) {
            $("[class*="+ el +"]:contains(" + sortType + ")", divs)
            .parent()
            .appendTo(divs.parent())
        })
    };
    return filtered()
});

＆＃13;

var divs = $("#content div:not([class])");
    var items = $.map(divs, function(el) {
        var elem = $(el);
        return {
            price: Number(elem.find(".price").text()),
            distance: Number(elem.find(".distance").text())
        }
    });
    var j = function(type)  {
        return items.sort(function(a, b) {
          return a[type] - b[type]
        })
    };
    
    $("button").on("click", function(e) {
        var el = e.target.id.toLowerCase().substring(2);
        var res = $.map(j(el), function(value, i) {          
              return value[el]
        });
        var filtered = function() {
            $.each(res, function(i, sortType) {
                $("[class*="+ el +"]:contains(" + sortType + ")", divs)
                .parent()
                .appendTo(divs.parent())
            })
        };
        return filtered()
    });

＆＃13;

.price:after, .distance:after {
    content: " " attr(class);
    font-style: italic;
}
img {
  width:20px;
  height:20px;
  background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="contentContainer">
      <div id="content">
        <div>
          <div class="price">1211</div>
          <div class="image"><img /></div>
          <div class="distance">20</div>
        </div>

        <div>
          <div class="price">23</div>
          <div class="image"><img /></div>
          <div class="distance">10</div>
        </div>

        <div>
          <div class="price">1010</div>
          <div class="image"><img /></div>
          <div class="distance">50</div>
        </div>

        <div>

          <div class="price">124</div>
          <div class="image"><img /></div>
          <div class="distance">60</div>
         </div>
       </div>
    </div>
    <button id="byPrice">sort by price</button>
    <button id="byDistance">sort by distance</button>

＆＃13;

如何根据“价格”和“价格”对酒店列表进行排序“DISTANCE”使用javascript。？

3 个答案: