在ajax調用后，如何保留toggleClass事件狀態？

Question

說我有以下HTML

<div class="row">
  <div class="link grey">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link">
    <a href="#">Link</a>
  </div>
</div>
<div class="row">
  <div class="link grey">
    <a href="#">Link</a>
  </div>
</div>

我希望能夠單擊該鏈接，更改背景顏色，並在ajax成功時保留該狀態（單擊鏈接時會發生ajax調用）。 但是現在，在ajax成功的前提下，就顯示了以前的狀態。

成功后，我將調用處理事件的函數

function ajaxOnSuccess(data) {
$(document).ready(function(){
    $('a').on('click', function(){
    $(this).closest('.link').toggleClass('grey');
  });
});
}

JSFiddle： http : //jsfiddle.net/mzg2zk48/

Answer 1

我認為您的javascript應該如下。 希望這會有所幫助。

$(document).ready(function(){
    $('a').on('click', function(){
        //ajax call goes here
        //ajax successs call ajaxOnSuccess(this) function
    });

    function ajaxOnSuccess(elm) {
        $(elm).closest('.link').toggleClass('grey');
    }  
});