我有一个脚本,其目标是按照该 div 类中的数字确定的升序对整个 div 类(包含图像)的列表进行排序。它必须按一下按钮才能工作。它的工作效果相对较好,只是它一直按第一个数字而不是整个数字对项目进行排序(导致像 1、10、11、2、3 等这样的排列)
我的完整代码如下,请告诉我如何解决这个问题。
注意:我正在寻找任何可能的解决方案,但如果可以使脚本保持接近其当前形式,我会更喜欢
CSS:
.number{
display:block;
color:black;
font-size:30px;
margin:20px
}
HTML:
<div id="sortingbutton">
<button>Sorting Button</button>
</div>
</div>
<ul id="list">
<li>
<div class="number">5</div>
<img src="http://i.imgur.com/b70bLk1.png" width="250px" height="250px" alt="aqua" />
</li>
<li>
<div class="number">4</div>
<img src="http://i.imgur.com/keE5Thi.png" width="250px" height="250px" alt="tan" />
</li>
<li>
<div class="number">1</div>
<img src="http://i.imgur.com/EgqCTZJ.png" width="250px" height="250px" alt="black" />
</li>
<li>
<div class="number">3</div>
<img src="http://i.imgur.com/4onkGsz.png" width="250px" height="250px" alt="grey" />
</li>
<li>
<div class="number">9</div>
<img src="http://i.imgur.com/To88ZFN.png" width="250px" height="250px" alt="orange" />
</li>
<li>
<div class="number">2</div>
<img src="http://i.imgur.com/6ZtB1VW.png" width="250px" height="250px" alt="purple" />
</li>
<li>
<div class="number">6</div>
<img src="http://i.imgur.com/5Pz2Q2Y.png" width="250px" height="250px" alt="yellow" />
</li>
<li>
<div class="number">7</div>
<img src="http://i.imgur.com/VqAdV1K.png" width="250px" height="250px" alt="blue" />
</li>
<li>
<div class="number">8</div>
<img src="http://i.imgur.com/4HCxTpm.png" width="250px" height="250px" alt="green" />
</li>
<li>
<div class="number">10</div>
<img src="http://i.imgur.com/JjjHmM0.png" width="250px" height="250px" alt="pink" />
</li>
<li>
<div class="number">11</div>
<img src="http://i.imgur.com/EpB8YgU.png" width="250px" height="250px" alt="Red" />
</li>
</ul>
Javascript:
window.onload = function () {
var desc = false;
document.getElementById("sortingbutton").onclick = function () {
sortUnorderedList("list", desc);
desc = !desc;
return false;
}
}
function compareText(a1, a2) {
var t1 = a1.innerText,
t2 = a2.innerText;
return t1 > t2 ? 1 : (t1 < t2 ? -1 : 0);
}
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string") {
ul = document.getElementById(ul);
}
var lis = ul.getElementsByTagName("LI");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++) {
vals.push(lis[i]);
}
vals.sort(compareText);
if (sortDescending) {
vals.reverse();
}
ul.innerHTML = '';
for (var i = 0, l = vals.length; i < l; i++) {
ul.appendChild(vals[i]);
}
}
最佳答案
为什么不在 compareText
中使用 a1.innerText - a2.innerText
?
说明
当您使用小于和大于符号比较两个字符串时,javascript 不会将它们转换为整数,因为 javascript 可以比较两个字符串,没有问题。例如,"10"> "2"
返回 true
,因为 "10"
更长。
但是,当您使用减法运算符时,JavaScript 无法对字符串进行减法,因此会将其转换为整数。
关于javascript - 按第一位数字而不是整数排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39224849/