javascript - 检查之前是否已执行过onClick

基本上，我有一个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;
}

最佳答案

这样做的几种方法；使其与已摆出的布局类似，可以利用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'))可能会造成混淆。

关于javascript - 检查之前是否已执行过onClick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48667712/