Question

我有以下内容：

HTML：

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

JS：

// 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>";
}

正如代码所处的那样，我必须在排序选项中注释掉更改排序输出，例如。

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

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

我想知道是否可以通过任何方式更改代码，以便我可以添加指向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项将动态使用，而不会每次刷新页面。

Answer 1

每次排序表时都必须重建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>

Answer 2

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

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>";
  }
}

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

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

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

请参阅Working Fiddle

HTML

<div id="sort">
    <a id="a" href="#" >Long - Short</a>
    <a id="b" href="#" >Short-Long</a>
    <a id="c" href="#" >Short-Long</a>
    <a id="d" href="#" >Long-Short</a>
</div>

的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)
})

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

2 个答案: