<div id="10" class="owoc">banan</div>
<div id="9" class="owoc">ananas</div>
<div id="8" class="owoc">fasola</div>
<div id="7" class="owoc">pomarancz</div>
<div id="6" class="owoc">winogrono</div>
<div id="5" class="owoc">ogorek</div>
<div id="4" class="owoc">mango</div>
<div id="3" class="owoc">seler</div>
<div id="2" class="owoc">cebula</div>
<div id="1" class="owoc">kiwi</div>
<button onclick="sortABC()">sortuj alfabetycznie</button>
var elements = document.getElementsByTagName('div');
var filtered = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className === "owoc") {
filtered.push(elements[i]);
}
}
var sorted = filtered.sort(function (a, b) {
return a.innerHTML > b.innerHTML;
});
var parent = elements[0].parentNode;
for (i = 0; i < sorted.length; i++) {
parent.appendChild(sorted[i]);
}
谁能告诉我如何连接这个脚本来对列表进行排序 onclick 而不是 onload ?而且我也不知道为什么按钮出现在顶部。
最佳答案
您在点击事件上调用函数 sortABC(),但没有将其定义为函数。
var sortABC = function(){
var elements = document.getElementById('elements').children;
var filtered = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i].className === "owoc") {
filtered.push(elements[i]);
}
}
var sorted = filtered.sort(function (a, b) {
return a.innerHTML > b.innerHTML;
});
var parent = elements[0].parentNode;
for (i = 0; i < sorted.length; i++) {
parent.appendChild(sorted[i]);
}
}
为了不对按钮进行排序,您可以将排序后的元素包装在容器中,并仅检索该容器的子元素:
<div id = "elements">
<div id="10" class="owoc">banan</div>
<div id="9" class="owoc">ananas</div>
<div id="8" class="owoc">fasola</div>
<div id="7" class="owoc">pomarancz</div>
<div id="6" class="owoc">winogrono</div>
<div id="5" class="owoc">ogorek</div>
<div id="4" class="owoc">mango</div>
<div id="3" class="owoc">seler</div>
<div id="2" class="owoc">cebula</div>
<div id="1" class="owoc">kiwi</div>
</div>
<button onclick="sortABC()">sortuj alfabetycznie</button>
关于javascript - js 按类在按钮上堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17423670/