检测第二次点击按钮

Question

我想更改按钮上的CSS。第一次点击，第二次。 我有这个，但它不起作用。千万不要添加.clic-two

$(".prev-next-links li.no-clic").click(function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 

$(".prev-next-links li.clic-one").click(function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

Answer 1

这样做的另一种方法是使用公共类作为选择器。由于DOM是动态的，因此您必须使用在用户交互后不会更改的CSS类。

$(".prev-next-links, .prev-next-links a").click(function() { 
 

 
    if ($(this).hasClass("no-clic")) { 
 
    
 
    $(this).removeClass('no-clic'); 
 
    $(this).addClass('clic-one'); 
 
    } else if ($(this).hasClass("clic-one")) { 
 
    $(this).removeClass('clic-one'); 
 
    $(this).addClass('clic-two'); 
 
    } 
 

 

 

 
});

.prev-next-links { 
 
    font-weight: bold; 
 
} 
 
.no-clic { 
 
    background-color: gray; 
 
} 
 
.clic-one { 
 
    background-color: aqua; 
 
} 
 
.clic-two { 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="prev-next-links no-clic">First 
 
    </li> 
 
    <li class="prev-next-links"><a class="no-clic" href="#">Second</a> 
 
    </li> 
 

 
</ul>

Answer 2

您正在删除/添加类，这意味着DOM上的属性是动态的。而对于动态元素，你需要使用事件委托方法的工作：

$(".prev-next-links").on('click','li.no-clic',function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 
$(".prev-next-links").on('click','li.click-one',function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

了解更多关于event delegation。

---

但我建议你设置一个标志变量来检查它是否被点击第二次：

var clickedTime = 0; 
$(".prev-next-links li").click(function() { 
    clickedTime++; 
    $(this).toggleClass('click-one',clickedTime % 2 == 0); 
}); 

查找toggleClass文档。

Answer 3

问题是因为您在页面加载后动态分配.clic-one类，但您在加载之前将点击事件挂接到负载上的.click-one按钮。

为了解决这个问题，你应该使用委派事件处理程序：

$('.prev-next-links').on('click', '.no-clic', function() { 
    $(this).toggleClass('no-clic clic-one'); 
}).on('click', '.clic-one', function() { 
    $(this).toggleClass('clic-one clic-two'); 
}); 

另外要注意在使用addClass()/removeClass()分别向toggleClass()单呼。