如何将链接值从“选择”更改为“选择”？

Question

这是我输入：

<a id="choose" alt="554">Choose</a>

我怎样才能获得输出点击链接后“选择”成为“选择了”再回到“选择”后，点击它再次？

我的预期输出：

<a id="choose" alt="554">Choosen</a>

这里是我的Ajax：

$(function(){ 
 
    
 
    $('#choose').live('click',function(){ 
 
      var $this = $(this); 
 
      var chapter_id = $this.attr('alt'); 
 

 
      if($this.hasClass('edu_level_active')){ 
 
       del_chapter(chapter_id,$this); 
 
      }else{ 
 
       if($this.hasClass('disabled')){ 
 
        return false; 
 
       }else{ 
 
        ins_chapter(chapter_id,$this); 
 
       } 
 
      } 
 

 
     }); 
 
    
 
    }); 
 

 
    function ins_chapter(chapter_id,$this) 
 
    { 
 
     $.ajax({ 
 
      type  : 'post', 
 
      url  : '/dashboard/choose/', 
 
      data  : 'chapter_id:'+chapter_id, 
 
      beforeSend: function(){ 
 
       $this.addClass('edu_level_active'); 
 
      },error : function(){ 
 
       alert('error'); 
 
      } 
 
     }); 
 

 
     return false; 
 
    }

Answer 1

在jQuery 1.7中，.live()方法已经过时了。使用.on()附加事件处理程序。尝试这个：。

$('#choose').on('click',function(){ 
     var $this = $(this); 
     var chapter_id = $this.attr('alt'); 
     var a_text = $this.text().trim(); 

     if(a_text=="Choose"){ 
      $this.text('Choosen'); 
     } 
     else{ 
      $this.text('Choose'); 
     } 


     if($this.hasClass('edu_level_active')){ 
      del_chapter(chapter_id,$this); 
     }else{ 
      if($this.hasClass('disabled')){ 
       return false; 
      }else{ 
       ins_chapter(chapter_id,$this); 
      } 
     } 

    }); 

Answer 2

很简单，只是测试文本的当前值，并相应地改变它：

$('#choose').live('click',function(){ 
    var $this = $(this); 
    var chapter_id = $this.attr('alt'); 
    var chapter_text = $this.text().trim(); 

    if (chapter_text === 'Chosen') { 
     $this.text('Choose'); 
    } else if (chapter_text === 'Choose') { 
     $this.text('Chosen'); 
    } 

    if ($this.hasClass('edu_level_active')) { 
     del_chapter(chapter_id,$this); 
    } else{ 
     if ($this.hasClass('disabled')) { 
      return false; 
     } else{ 
      ins_chapter(chapter_id,$this); 
     } 
    } 
}); 

Answer 3

您可以定义一个布尔变量，其指示点击或取消勾选。

var retVal = false 
 
$('#choose').on('click', function(){ 
 
if (!retVal){ 
 
    retVal = true; 
 
    $(this).text('Choosen'); 
 
} 
 
else { 
 
retVal = false; 
 
     $(this).text('Choose'); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a id="choose" alt="554">Choose</a>