切換開關狀態鏈接圖標

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