toggle switch status Verbindungssymbol

Question

Ich habe einen Link mit zwei Status erstellt, der den Standardstatus [verify = false] und den sekundären Status [verified = true] hat und von einem Manager über eine Admin-Seite geändert wird. jquery schaltet diesen Status mithilfe von SVG-Symbolen um und ändert seine Hintergrundposition über CSS.

Diese Verknüpfungssymbolauswahl zeigt nur statisch auf mehreren Seiten an, dass dieser/dieser Benutzer vom Manager verifiziert wurde oder nicht. Es ist standardmäßig deaktiviert [false].

Das Umschalten funktioniert gut, was ich bin zufrieden, aber in der 'POST' Variable, ich bin mir nicht sicher, wie man die eindeutige ID für eine (und für viele in einer Seite?) Der Auswahl, wenn seine eingeschaltet und dies auf mehreren Seiten wiederzugeben. Ich muss nur das Frontend-Skript dafür machen, und dann wird der Backend-Entwickler in C# für die db kodieren.

Ich denke, ich habe die Grundlage in meinem Code, aber "was poste ich" und wie in einer Beispielseite zeige ich dieses statische Symbol aus dem Admin?

Ich bin nicht gut mit jQuery vertraut, also könnte ich etwas schweres Heben damit brauchen. Ich werde soziale Symbole wird mit nur mit hier zum Experimentieren ..

$('.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

Nicht sicher, warum Sie verwenden statische ID_01. Ersetzen Sie dies durch ID. Ich hoffe, du willst das machen.

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