Javascript 排序JS数组而不重新加载页面

我有以下资料：

HTML:

<ul id="listing"></ul>

// sort functions:

function SortLen(arr, ascYN) {
        arr.sort(function (a, b) {
            if (ascYN) return a.length - b.length;
            else return b.length - a.length;
        });
    }

function SortAZ (arr) {
        arr.sort(function (a, b) {
            if (a < b) return -1;
            else if (a > b) return 1;
            return 0;
        });
    }

function SortZA (arr) {
        arr.sort(function (a, b) {
            if (a > b) return -1;
            else if (a < b) return 1;
            return 0;
        });
    }

// define array

var listing = document.getElementById("listing");
var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array

// SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
SortZA( myStringArray );

// display the array

var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    listing.innerHTML += "<li>" + myStringArray[i] + "</li>";
}

然后我必须重新加载页面以获取更改，并对数组进行不同的排序

我想知道是否有任何方法可以改变代码，这样我就可以在HTML中添加链接来添加链接-例如

<div id="sort">
    <a href="#" onclick="SortLen( myStringArray, false );">Long - Short</a>
    <a href="#" onclick="SortLen( myStringArray, true );">Short-Long</a>
    <a href="#" onclick="SortAZ( myStringArray );">Short-Long</a>
    <a href="#" onclick="SortZA( myStringArray );">Long-Short</a>
</div>

---

因此，当单击时，生成的LI项将被动态重新调用，而无需每次刷新页面。

您必须在每次对表排序时重新生成html。您的代码仅在加载时更改html，然后才对数组进行排序。这是一个简单的javascript，而不是它可以工作的地方。您可以尝试以下代码：

<div id = "sort" >
    < a href="javascript:SortLen( myStringArray, false ); rebuild();">Long - Short</a>
    <a href = "javascript:SortLen( myStringArray, true ); rebuild();" > Short - Long </ a >
    < a href="javascript:SortAZ( myStringArray ); rebuild();">Short-AZ</a>
    <a href = "javascript:SortZA( myStringArray ); rebuild();" > Long - ZA </ a >
</ div >

< ul id="listing"></ul>

<script>

function SortLen(arr, ascYN)
{
    arr.sort(function(a, b) {
        if (ascYN) return a.length - b.length;
        else return b.length - a.length;
    });
}

function SortAZ(arr)
{
    arr.sort(function(a, b) {
        if (a < b) return -1;
        else if (a > b) return 1;
        return 0;
    });
}

function SortZA(arr)
{
    arr.sort(function(a, b) {
        if (a > b) return -1;
        else if (a < b) return 1;
        return 0;
    });
}

// define array

var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array

// SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
SortZA(myStringArray );
rebuild();
// display the array

function rebuild()
{
    var listing = document.getElementById("listing");
    var arrayLength = myStringArray.length;
    listing.innerHTML = "";
    for (var i = 0; i < arrayLength; i++)
    {
        listing.innerHTML += "<li>" + myStringArray[i] + "</li>";
    }
}

</script>

长-短
隆扎

功能分类（arr、ascYN）
{
arr.sort（函数（a，b）{
if（ascYN）返回a.length-b.length；
否则返回b.length-a.length；
});
}
索塔兹函数（arr）
{
arr.sort（函数（a，b）{
如果（ab）返回1；
返回0；
});
}
功能SortZA（arr）
{
arr.sort（函数（a，b）{
如果（a>b）返回-1；
否则如果（a”+myStringArray[i]+“”；
}
}

每次对表排序时都必须重新生成html。您的代码仅在加载时更改html，然后才对数组进行排序。这是一个简单的javascript，而不是它可以工作的地方。您可以尝试以下代码：

<div id = "sort" >
    < a href="javascript:SortLen( myStringArray, false ); rebuild();">Long - Short</a>
    <a href = "javascript:SortLen( myStringArray, true ); rebuild();" > Short - Long </ a >
    < a href="javascript:SortAZ( myStringArray ); rebuild();">Short-AZ</a>
    <a href = "javascript:SortZA( myStringArray ); rebuild();" > Long - ZA </ a >
</ div >

< ul id="listing"></ul>

<script>

function SortLen(arr, ascYN)
{
    arr.sort(function(a, b) {
        if (ascYN) return a.length - b.length;
        else return b.length - a.length;
    });
}

function SortAZ(arr)
{
    arr.sort(function(a, b) {
        if (a < b) return -1;
        else if (a > b) return 1;
        return 0;
    });
}

function SortZA(arr)
{
    arr.sort(function(a, b) {
        if (a > b) return -1;
        else if (a < b) return 1;
        return 0;
    });
}

// define array

var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array

// SortLen( myStringArray, false );
// SortLen( myStringArray, true );
// SortAZ( myStringArray );
SortZA(myStringArray );
rebuild();
// display the array

function rebuild()
{
    var listing = document.getElementById("listing");
    var arrayLength = myStringArray.length;
    listing.innerHTML = "";
    for (var i = 0; i < arrayLength; i++)
    {
        listing.innerHTML += "<li>" + myStringArray[i] + "</li>";
    }
}

</script>

长-短
隆扎

功能分类（arr、ascYN）
{
arr.sort（函数（a，b）{
if（ascYN）返回a.length-b.length；
否则返回b.length-a.length；
});
}
索塔兹函数（arr）
{
arr.sort（函数（a，b）{
如果（ab）返回1；
返回0；
});
}
功能SortZA（arr）
{
arr.sort（函数（a，b）{
如果（a>b）返回-1；
否则如果（a”+myStringArray[i]+“”；
}
}

首先，您应该在每次排序后调用的单独方法中提取显示：

function draw (array) {
  var arrayLength = array.length;
  document.getElementById('listing').innerHTML = ''
  for (var i = 0; i < arrayLength; i++) {
    document.getElementById('listing').innerHTML += "<li>" + array[i] + "</li>";
  }
}

函数图（数组）{
var arrayLength=array.length；
document.getElementById（'listing'）。innerHTML=''
对于（变量i=0；i”+array[i]+“”；
}
}

应避免内联事件处理，并将事件处理程序附加到dom元素：

<a id="a" href="#" >Long - Short</a>

document.getElementById('a').addEventListener('click', function(ev){
  SortLen( myStringArray, false );
  draw(myStringArray)
})

document.getElementById（'a'）。addEventListener（'click'，函数（ev）{
SortLen（myStringArray，假）；
绘图（myStringArray）
})

看

Html

Javascript

 const SortLen = function (arr, ascYN) {
     arr.sort(function (a, b) {
         if (ascYN) return a.length - b.length;
         else return b.length - a.length;
     });
  }

function SortAZ (arr) {
        arr.sort(function (a, b) {
            if (a < b) return -1;
            else if (a > b) return 1;
            return 0;
        });
    }

function SortZA (arr) {
        arr.sort(function (a, b) {
            if (a > b) return -1;
            else if (a < b) return 1;
            return 0;
        });
    }

// define array

var listing = document.getElementById("listing");
var myStringArray = ["Saab", "Volvo", "BMW", "Mercedes", "Volkswagon", "Ford"];

// sort the array
SortZA( myStringArray );

function draw (array) {
  var arrayLength = array.length;
  document.getElementById('listing').innerHTML = ''
  for (var i = 0; i < arrayLength; i++) {
    document.getElementById('listing').innerHTML += "<li>" + array[i] + "</li>";
  }
  console.log(array)
}
draw(myStringArray)


document.getElementById('a').addEventListener('click', function(ev){
console.log('okok')
  SortLen( myStringArray, false );
  draw(myStringArray)
})
document.getElementById('b').addEventListener('click', function(ev){
  SortLen( myStringArray, true );
  draw(myStringArray)
})
document.getElementById('c').addEventListener('click', function(ev){
  SortAZ( myStringArray );
  draw(myStringArray)
})
document.getElementById('d').addEventListener('click', function(ev){
  SortZA( myStringArray );
  draw(myStringArray)
})

const SortLen=函数（arr，ascYN）{
arr.sort（函数（a，b）{
if（ascYN）返回a.length-b.length；
否则返回b.length-a.length；
});
}
索塔兹函数（arr）{
arr.sort（函数（a，b）{
如果（ab）返回1；
返回0；
});
}
功能SortZA（arr）{
arr.sort（函数（a，b）{
如果（a>b）返回-1；
否则如果（a”+array[i]+“”；
}
console.log（数组）
}
绘图（myStringArray）
document.getElementById（'a'）。addEventListener（'click'，函数（ev）{
console.log（'okok'）
SortLen（myStringArray，假）；
绘图（myStringArray）
})
document.getElementById（'b'）。addEventListener（'click'，函数（ev）{
索特伦（myStringArray，真的）；
绘图（myStringArray）
})
document.getElementById（'c'）。addEventListener（'click'，函数（ev）{
索塔兹（myStringArray）；
绘图（myStringArray）
})
document.getElementById（'d'）。addEventListener（'click'，函数（ev）{
索尔萨（迈斯特林加雷）；
绘图（myStringArray）
})

首先，您应该在每次排序后调用的单独方法中提取显示：

function draw (array) {
  var arrayLength = array.length;
  document.getElementById('listing').innerHTML = ''
  for (var i = 0; i < arrayLength; i++) {
    document.getElementById('listing').innerHTML += "<li>" + array[i] + "</li>";
  }
}

函数图（数组）{
var arrayLength=array.length；
document.getElementById（'listing'）。innerHTML=''
对于（变量i=0；i”+array[i]+“”；
}
}

应避免内联事件处理，并将事件处理程序附加到dom元素：

<a id="a" href="#" >Long - Short</a>

document.getElementById('a').addEventListener('click', function(ev){
  SortLen( myStringArray, false );
  draw(myStringArray)
})

document.getElementById（'a'）。addEventListener（'click'，函数（ev）{
SortLen（myStringArray，假）；
绘图（myStringArray）
})

看

Html