クラスが変更されたときにhref関数を変更するjquery

Question

ユーザーを接続または切断するhrefリンクがあります。
ユーザーが接続されているときに、リンクがクリックされたときにリンクを解除する必要があります。別の手で、ユーザーがまだ接続されていない場合は、ユーザーを接続する必要があります。
すべてがうまくいっていますが、ユーザーを切断すると、ページを更新するまでは彼に接続できません。 私はこのJavaScriptコードを持っている：

$(document).ready(function() { 
    $('a.disconect').click(function(e) { 
     e.preventDefault(); 
     $(this).css('background', 'url(images/connect.png) no-repeat'); 
     $(this).removeClass('disconect'); 
     $(this).addClass('connect'); 
     //: url(images/rep_usr.png) no-repeat; 
     var parent = $(this).parent().parent(); 
     $.ajax({ 
      type: 'get' 
      , url: 'Save.php?id=enable' 
      , data: 'username=' + $(this).attr('id').replace('record-', '') 
      , beforeSend: function(data) { 
       //alert(data); 
      } 
      , success: function(data) { 
       //alert(data); 
      } 
     }); 
    }); 
}); 


$(document).ready(function() { 
    $('a.connect').click(function(e) { 
     e.preventDefault(); 

     $(this).css('background', 'url(images/disconnect.png) no-repeat'); 
     $(this).removeClass('connect'); 
     $(this).addClass('disconect'); 
     //: url(images/rep_usr.png) no-repeat; 
     var parent = $(this).parent().parent(); 
     $.ajax({ 
      type: 'get' 
      , url: 'Save.php?id=disable' 
      , data: 'username=' + $(this).attr('id').replace('record-', '') 
      , beforeSend: function(data) { //alert(data); 
       //alert(data); 
      } 
      , success: function(data) { 
       //alert(data); 
      } 
     }); 
    }); 
}); 

私はそれがクリックされるたびに別の関数を呼び出すようにしたいです。

Answer 1

こんにちは場合は、その後、私は以下のようなコードは、あなたがそれ

$("a").click(function(){ 
 
    if($(this).hasClass("current")||$(this).hasClass("disconnect")) 
 
    { 
 
     $(this).removeClass("current"); 
 
     $(this).removeClass("disconnect"); 
 
     $(this).addClass("connect"); 
 
     $(this).text("You are Connected") 
 
    } 
 
    
 
    
 
    else 
 
    { 
 
     $(this).removeClass("current"); 
 
     $(this).removeClass("connect"); 
 
     $(this).addClass("disconnect"); 
 
     $(this).text("You are dis Connected") 
 
    } 
 

 
    
 
});

.connect 
 

 
{ 
 
    
 
    font-size: 150%; 
 
    color: green; 
 
} 
 

 

 
.disconnect{ 
 
    
 
    font-size: 150%; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a class="current" href="#">No Line</a> 
 

 

 
<p> 
 

 
</p>

を通じて役立つ何かを見つけることを願っています追加したことを変更するには、現在のクラスを見つけること hasClass()機能を使用することができます

Answer 2

クラスを動的に変更しようとしています。クラスを動的に変更しようとしていますが、これらのクラスで発生するイベントにはマッピングされません。まず、あなたは動的にDOMに追加された新しいクラスにイベントをマップする代わりに、このよう

$('a.disconect').click(function(e) { 

の

$(document).on('click', 'a.disconect', function(){ 

を使用する必要があります。 https://learn.jquery.com/events/event-delegation/

ただし、2つのボタンと.hide（）または.show（）のいずれかを作成してアクティブにしたい方がよいソリューションです。その後、不要なクラスや背景画像の追加と削除を行う必要はありません。私ははっきりとあなたの問題を理解