javascript - 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');
    }  
});