检查on

Question

基本上我有一个HTML表，里面有几行/列。如果单击某个特定标题，则JavaScript将按ASC对该标题列进行排序，如果再次单击它将按DESC对其进行排序。

但是，如果用户再次尝试将列设置为DESC，则该函数无法知道之前是否单击过该标题。

要解决此问题，我添加了隐藏的HTML输入：

<input type="text" style="display: none" value="0" id="sorted">

调用函数后，我在输入排序中加1，然后再次调用该函数，检查输入已排序是否为1，如果是然后我将列设置为DESC。

这是处理它的最佳方式吗？我只是想知道是否有更好的方法可以使函数被识别为之前单击的操作。

var sorted = document.getElementById("sorted").value;

if(sorted === 0){
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
    }
   document.getElementById("sorted").value=1;
}else{
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
    }
    document.getElementById("sorted").value=0;
}

Answer 1

有两种方法可以做到这一点;保持它类似于你已经完成的方式，你可以利用HTML数据属性来做同样的事情：

<input type="text" style="display: none" data-sorted="false" id="sorted">

var sorted = document.getElementById("sorted").dataset.sorted;

if (sorted === "false"){
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.value = "true";
} else {
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.value = "false";
}

请注意，我们现在没有按照您的示例重新运行document.getElementByID...;将该值设置为sorted变量将更有效，并为您提供更好的代码。

另一个选项是@sumeet kumar提到的，并使用CSS类来确定排序状态。就个人而言，我并不喜欢这个，因为CSS应该用于造型问题。尽管如此，你可以这样做：

<input type="text" style="display: none" class="sorted" id="sorted">

var sorted = document.getElementById("sorted");

if (sorted.classList.contains('sorted')) {
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.classList.remove('sorted');
} else {
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.classList.add('sorted');
}

请注意，在第二个示例中，我们颠倒了if语句的顺序;这是为了避免这样的逻辑：if (!sorted.classList.contains('sorted'))这会让人感到困惑。