Javascript 按钮上的js按id排序

嗨，我想把这个脚本连接到按钮上，但它不工作。我不知道为什么

var sortID = function()
{
var toSort = document.getElementById('list').children;
toSort = Array.prototype.slice.call(toSort, 0);

toSort.sort(function(a, b) {
    var aord = +a.id.split('-')[1];
    var bord = +b.id.split('-')[1];
    // two elements never have the same ID hence this is sufficient:
    return (aord > bord) ? 1 : -1;
});

var parent = document.getElementById('list');
parent.innerHTML = "";

for(var i = 0, l = toSort.length; i < l; i++) {
    parent.appendChild(toSort[i]);}
};

var sortID=function（）
{
var-toSort=document.getElementById（'list'）.children；
toSort=Array.prototype.slice.call（toSort，0）；
toSort.sort（函数（a，b）{
var aord=+a.id.split（'-'）[1]；
var bord=+b.id.split（'-'）[1]；
//两个元素从来没有相同的ID，因此这就足够了：
返回（aord>bord）？1:-1；
});
var parent=document.getElementById（'list'）；
parent.innerHTML=“”；
for（变量i=0，l=toSort.length；i

创建一个按钮并加载，将它的

onclick

处理程序分配给您的

sortID（）

函数：

HTML:

Javascript:

var sortID = function () {

    var toSort = document.getElementById('list').children;
    toSort = Array.prototype.slice.call(toSort, 0);

    toSort.sort(function (a, b) {
        var aord = +a.id.split('-')[1];
        var bord = +b.id.split('-')[1];
        // two elements never have the same ID hence this is sufficient:
        return (aord > bord) ? 1 : -1;
    });

    var parent = document.getElementById('list');
    parent.innerHTML = "";

    for (var i = 0, l = toSort.length; i < l; i++) {
        parent.appendChild(toSort[i]);
    }

};

window.onload = function(){
    document.getElementById("mybutton").onclick = sortID;
}

var sortID=函数（）{
var-toSort=document.getElementById（'list'）.children；
toSort=Array.prototype.slice.call（toSort，0）；
toSort.sort（函数（a，b）{
var aord=+a.id.split（'-'）[1]；
var bord=+b.id.split（'-'）[1]；
//两个元素从来没有相同的ID，因此这就足够了：
返回（aord>bord）？1:-1；
});
var parent=document.getElementById（'list'）；
parent.innerHTML=“”；
for（变量i=0，l=toSort.length；i

创建一个按钮并加载，将它的

onclick

处理程序分配给您的

sortID（）

函数：

HTML:

Javascript:

var sortID = function () {

    var toSort = document.getElementById('list').children;
    toSort = Array.prototype.slice.call(toSort, 0);

    toSort.sort(function (a, b) {
        var aord = +a.id.split('-')[1];
        var bord = +b.id.split('-')[1];
        // two elements never have the same ID hence this is sufficient:
        return (aord > bord) ? 1 : -1;
    });

    var parent = document.getElementById('list');
    parent.innerHTML = "";

    for (var i = 0, l = toSort.length; i < l; i++) {
        parent.appendChild(toSort[i]);
    }

};

window.onload = function(){
    document.getElementById("mybutton").onclick = sortID;
}

var sortID=函数（）{
var-toSort=document.getElementById（'list'）.children；
toSort=Array.prototype.slice.call（toSort，0）；
toSort.sort（函数（a，b）{
var aord=+a.id.split（'-'）[1]；
var bord=+b.id.split（'-'）[1]；
//两个元素从来没有相同的ID，因此这就足够了：
返回（aord>bord）？1:-1；
});
var parent=document.getElementById（'list'）；
parent.innerHTML=“”；
for（变量i=0，l=toSort.length；i

您可以将事件处理程序分配给按钮，如下所示：

document.getElementById('sortButtonIdHere').addEventListener('click', function() {    
    // your code here    
}, false);

演示：

如果您关心支持IE8及以上版本，可以使用：

document.getElementById('sortButtonIdHere').onclick = function() {    
    // your code here    
};

---

或者，您可以添加一个测试，测试是否定义了

.addEventListener（）

，如果未定义，则使用

attachEvent（）

作为。

您可以将事件处理程序分配给按钮，如下所示：

document.getElementById('sortButtonIdHere').addEventListener('click', function() {    
    // your code here    
}, false);

演示：

如果您关心支持IE8及以上版本，可以使用：

document.getElementById('sortButtonIdHere').onclick = function() {    
    // your code here    
};

或者，您可以添加一个测试，测试是否定义了

.addEventListener（）

，如果未定义，则使用

attachEvent（）

作为。

尝试以下操作：

HTML:

<div id="list">
    <div id="categorie5.1-4">4</div>
    <div id="categorie5.1-3">3</div>
    <div id="categorie5.1-5">5</div>
    <div id="categorie5.1-1">1</div>
    <div id="categorie5.1-2">2</div>
</div>
<input type="button" onclick="keyMe()" value="hook">

4.
3.
5.
1.
2.

Javascript:

function keyMe(){
    var toSort = document.getElementById('list').children;
    toSort = Array.prototype.slice.call(toSort, 0);

    toSort.sort(function(a, b) {
        var aord = +a.id.split('-')[1];
        var bord = +b.id.split('-')[1];
        // two elements never have the same ID hence this is sufficient:
        return (aord > bord) ? 1 : -1;
    });

    var parent = document.getElementById('list');
    parent.innerHTML = "";

    for(var i = 0, l = toSort.length; i < l; i++) {
        parent.appendChild(toSort[i]);
    }
}

函数keyMe（）{
var-toSort=document.getElementById（'list'）.children；
toSort=Array.prototype.slice.call（toSort，0）；
toSort.sort（函数（a，b）{
var aord=+a.id.split（'-'）[1]；
var bord=+b.id.split（'-'）[1]；
//两个元素从来没有相同的ID，因此这就足够了：
返回（aord>bord）？1:-1；
});
var parent=document.getElementById（'list'）；
parent.innerHTML=“”；
for（变量i=0，l=toSort.length；i

我希望它能帮助你

下面是链接：jsfiddle.net/dp6Vr/

试试这个：

HTML:

<div id="list">
    <div id="categorie5.1-4">4</div>
    <div id="categorie5.1-3">3</div>
    <div id="categorie5.1-5">5</div>
    <div id="categorie5.1-1">1</div>
    <div id="categorie5.1-2">2</div>
</div>
<input type="button" onclick="keyMe()" value="hook">

4.
3.
5.
1.
2.

Javascript:

function keyMe(){
    var toSort = document.getElementById('list').children;
    toSort = Array.prototype.slice.call(toSort, 0);

    toSort.sort(function(a, b) {
        var aord = +a.id.split('-')[1];
        var bord = +b.id.split('-')[1];
        // two elements never have the same ID hence this is sufficient:
        return (aord > bord) ? 1 : -1;
    });

    var parent = document.getElementById('list');
    parent.innerHTML = "";

    for(var i = 0, l = toSort.length; i < l; i++) {
        parent.appendChild(toSort[i]);
    }
}

函数keyMe（）{
var-toSort=document.getElementById（'list'）.children；
toSort=Array.prototype.slice.call（toSort，0）；
toSort.sort（函数（a，b）{
var aord=+a.id.split（'-'）[1]；
var bord=+b.id.split（'-'）[1]；
//两个元素从来没有相同的ID，因此这就足够了：
返回（aord>bord）？1:-1；
});
var parent=document.getElementById（'list'）；
parent.innerHTML=“”；
for（变量i=0，l=toSort.length；i

我希望它能帮助你

---

下面是链接：jsfiddle.net/dp6Vr/

可能是因为您的HTML缺少一个按钮。问题是“如何将此代码挂接到按钮？”或“为什么此排序函数在我的列表上不起作用？”编辑：我只是看了看小提琴，显然排序确实起作用。您是否告诉我们您能够编写这样的排序函数，但无法执行按钮单击事件处理程序？对于不知道如何绑定单击事件的人来说，函数的编码方式非常困难。在问问题之前，你是否用过按钮，甚至试过查看一下？标记在元素#1之后：在提出问题之前，您是否做了一些研究？可能是因为您的HTML缺少一个按钮。问题是“如何将此代码挂接到按钮？”或“为什么此排序函数在我的列表上不起作用？”编辑：我只是看了一下小提琴，显然排序确实起作用。您是否告诉我们您能够编写这样的排序函数，但无法执行按钮单击事件处理程序？对于不知道如何绑定单击事件的人来说，函数的编码方式非常困难。在问问题之前，你是否用过按钮，甚至试过查看一下？标记如下元素#1：在提出问题之前，你做过一些研究吗？