切换开关状态链接图标

Question

我已经创建了两种状态的链接，默认状态是[verify = false]和辅助状态[verified = true]，并将通过管理页面从管理器更改。 jquery将使用SVG图标切换此状态并通过CSS更改其背景位置。

此链接图标选择只会在多个页面上静态显示此用户已经过或未经过管理员验证。它默认关闭[false]。

切换效果很好，我对此感到满意，但是在'POST'变量中，我不确定如何获得选择的唯一ID（对于页面中的很多内容？）打开并反映在多个页面上。我只需要为此执行前端脚本，然后后端开发将在C＃中为db编写代码。

我想我已经在我的代码中奠定了基础，但'我要发布什么'以及如何在示例页面中显示从管理员中选择的静态图标？

我对jquery不太熟悉，所以我可能需要一些繁重的工作。我将使用社交图标只是在这里尝试..

$('.verify').click(function() { 
 
    var id = $(this).parents('div').attr('id'); 
 
    $(this).toggleClass('verified'); 
 
    $.post('#', { 
 
     'verified': $(this).hasClass('verified'), 
 
     'id': ID_01 
 
    }, 
 
    function(data) { 
 
     if (data.verified) { 
 
     $(this).toggleClass('verified'); 
 
     } 
 
    }); 
 
});

body { 
 
    background-color: #aaa; 
 
} 
 
.verify { 
 
    text-indent: -5000px; 
 
    display: block; 
 
    background-image: url('http://imgh.us/social_4.svg'); 
 
    background-position: 84px 75px; 
 
    height: 38px; 
 
    width: 38px; 
 
    border: 1px solid #000; 
 
} 
 
.verify.verified { 
 
    background-position: 84px 38px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 
<div id="ID_01"> 
 
    <p> 
 
    <a href="#" class="verify">verify</a> 
 
    </p> 
 
</div>

Answer 1

不知道，为什么你使用静态ID_01。将其替换为ID。希望你想这样做。

$('.verify').click(function() { 
    var id = $(this).parents('div').attr('id'); 
    $(this).toggleClass('verified'); 
    $.post('#', { 
     'verified': $(this).hasClass('verified'), 
     'id': id /* Updated */ 
    }, 
    function(data) { 
     if (data.verified) { 
     $(this).toggleClass('verified'); 
     } 
    }); 
});