Question

我想通过使用javascript在select标签中选择一个选项来对html页面上的元素进行排序。例如。当我选择“COST”选项时，文章标签中的元素按p标签中的成本排序，并按排序顺序显示。我现在用jQuery如何做到这一点，但如果没有它我怎么能这样做呢？

文章部分

<article class="item_box">
    <p class="item_title">WIDGET 01</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p data-num='1' id="article1" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article1').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article1').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">4232</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="01">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 02</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p  id="article2" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article2').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article2').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">4242</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="02">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 03</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article3" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article3').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article3').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">65</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="03">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 04</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article4" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article4').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article4').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">213</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="04">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 05</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article5" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article5').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article5').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">5321</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="05">BUY</button>
</article>

HTML SELECT

<p class="sort21">SORT BY:</p>
        <select id="selectop">
            <option value="1">COST</option>
            <option value="2">NAME</option>
        </select>

Answer 1

首先，您必须将所有文章插入到div或任何类型的元素中。

第二，使用您要排序的相应元素的类，作为select标签选项的值。因此，根据您的示例，我们将使用item_title，item_price作为选择标记选项的值。

现在看到完整的代码，它会根据所选的选项对文章进行排序，你一定会明白的。例如，我缩短了你的文章。

function sort(sortBy) {
  var items = document.getElementsByClassName("item_box");

  // getElementsByClassName returns object. make it a array to use sort function
  var itemsArr = [];
  for (var i in items) {
    if (items[i].nodeType == 1) { // consider elements only
      itemsArr.push(items[i]);
    }
  }

  var sorted = itemsArr.sort(function (a, b) {
    a = a.getElementsByClassName(sortBy)[0].innerHTML;
    b = b.getElementsByClassName(sortBy)[0].innerHTML;
    
    //decide whether need number sort or string sort
    if(isNaN(a) || isNaN(b)) 
      return a.localeCompare(b);
    else
      return a-b;
  });

  for (i = 0; i < sorted.length; ++i) {
    document.getElementById("items").appendChild(sorted[i]);
  }
}

<div id="items">
  <article class="item_box">
    <p class="item_title">WIDGET 01</p>
    <p class="amount"><span class="item_price">4232</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 02</p>
    <p class="amount"><span class="item_price">4242</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 03</p>
    <p class="amount"><span class="item_price">65</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 04</p>
    <p class="amount"><span class="item_price">213</span></p></button>
  </article>
<article class="item_box">
  <p class="item_title">WIDGET 05</p>
  <p class="amount"><span class="item_price">5321</span></p>
</article>  
</div>

<p class="sort21">SORT BY:</p>
<select id="selectop" onchange="sort(this.value)">
  <option value="item_title">NAME</option>
  <option value="item_price">COST</option>
</select>

Answer 2

您可以将html更改为：

<p class="sort-label">SORT BY: <span id="sort-value"> </span></p>
<select id="select-sorting" onchange="changeSorting()">
    <option value="cost">COST</option>
    <option value="name">NAME</option>
</select>

并将其添加到javascript：

function changeSorting() {
    var sortBy = document.getElementById("select-sorting").value;
    document.getElementById("sort-value").innerHTML(sortBy);
}

使用所选选项对页面上的元素排序，而不使用JQuery

2 个答案: