Question

<a href="#" class="sort">Sort</a> 


   $(".sort").click(function (event) {
        $(this).toggle(function() {
                $(this).toggleClass("sortUp","sortDown");
            }, function() {
                $(this).toggleClass("sortDown","sortUp");
           });
    });

它可以工作，但我需要在它工作之前单击一次。所以 - 点击（没有任何反应），点击（sortUP），点击（sortDown）

我想删除第一次点击。

感谢社区的帮助！

Answer 1

首先，您错误地使用了toggleClass。您似乎想要在每次单击时切换sortDown和sortUp。这是用toggleClass("sortDown sortUp")完成的。

其次，当您加载页面时，您需要您的班级.sort在其sortUp属性中设置sortDown或class。例如<a href="#" class="sort sortDown">。这可以确保您可以对您的代码进行推理（即，总是为真，sortUp, sortDown上只设置了div个{/ 1>}。

第三，$(this).click(function() { /* code */ })表示“当有人点击时，执行/*code*/”。你已经把你的

包裹起来了

$(this).click(function() { $(this).toggleClass("sortUp sortDown"); })

用$(".sort").click(function () {设置点击行为，这意味着您需要初始点击“排序”才能启动此行为。

所以正确的版本是：

<a href="#" class="sort sortDown">Sort</a> 


   $(document).ready(function () {
        $(".sort").click(function() {
                $(this).toggleClass("sortUp sortDown");
        });
    });

Answer 2

您似乎在第一次点击时添加点击事件，如果您想在sortUp和sortDown之间切换，您只需指定它们。只要元素以一个或另一个（不是两个而不是两者）开头，它就会每次交换它们。

$(".sort").click(function() {
    $(this).toggleClass('sortUp sortDown');
});

您可以在JSFiddle上看到这种情况。

Answer 3

如果您不想以sortUp或sortDown类开头，请执行以下操作：

<a href="#" class="sort">Sort</a> 

$(".sort").click(function (event) {            
    if($(this).hasClass("sortUp") || $(this).hasClass("sortDown")){
        $(this).toggleClass("sortUp sortDown");
    }else{
        $(this).addClass("sortUp");
    }
});

在两个类之间切换jQuery =工作但是额外点击

3 个答案: