jquery - 使链接一旦被点击就不可点击 - jquery

Question

我试图使链接在单击后不可单击，然后在单击另一个链接后可单击。基本上只是一个切换，但我需要使事件链接不可点击以防止切换。这是我的代码:

$(document).ready(function(){
       $("#Espanol").hide();
       $("#espLink").addClass("nonSelected");           
       // Make english link unclickable
       $("#espLink").click(function(){
           $("#engLink").addClass("nonSelected");
           $("#espLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();    
           // need to make espanol link unclickable  
           // and english link clickable             
       });

       $("#engLink").click(function(){
           $("#espLink").addClass("nonSelected");
           $("#engLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();  
           // need to make english link unclickable  
           // and espanol link clickable        
       });
    });

和 html:

<a id="engLink">English</a> | <a id="espLink">Español</a>

有人知道怎么做吗？

Answer 1

在点击函数中添加一个测试，以查看链接是否具有正确的“nonSelected”类。如果没有，点击时不会发生任何事情。

$(document).ready(function(){
   $("#Espanol").hide();
   $("#espLink").addClass("nonSelected");           
   // Make english link unclickable
   $("#espLink").click(function(){
       if($(this).hasClass('nonSelected')){
           $("#engLink").addClass("nonSelected");
           $("#espLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();    
           // need to make espanol link unclickable  
           // and english link clickable    
       }else{
           return false;
       }         
   });

   $("#engLink").click(function(){
       if($(this).hasClass('nonSelected')){
           $("#espLink").addClass("nonSelected");
           $("#engLink").removeClass("nonSelected");
           $("#English").toggle(); 
           $("#Espanol").toggle();  
           // need to make english link unclickable  
           // and espanol link clickable 
       }else{
           return false;
       }                
   });
});