Wie realisiert JQuery die Funktionen „Click to Follow“ und „Unfollow“?

So etwas wie ein Internetbegriff, der „zustimmen“ und „lieben“ bedeutet.

Dieser Internet-Slang kommt von der „Gefällt mir“-Funktion von Online-Communities. Die Anzahl der „Gefällt mir“-Angaben, die Sie senden und empfangen, Ihre Präferenzen beim Vergeben von „Gefällt mir“-Angaben usw. können bis zu einem gewissen Grad widerspiegeln, wer Sie sind und in welchem ​​Zustand Sie sich befinden. Hinter den Likes spiegeln Sie sich. Korrespondierend hierzu ist die Abbruchfunktion. Zufälligerweise hat der Blogger kürzlich an einer APP gearbeitet und einen der Abschnitte benötigt, um die Funktionen „Gefällt mir“ und „Abbrechen“ zu implementieren. Nachdem er darüber nachgedacht hatte, entschied er sich, ihn ohne weitere Umschweife zu implementieren bis aufs Praktische! !

Zuerst müssen wir das JQuery-Plug-in einführen

Zweitens müssen wir ein Div definieren und ihm etwas geben Stile

Dann gibt es den JS-Code, wie unten gezeigt

$(document) .ready(function(){

var onOff=true;

var div=$(".div");

div.click(function( ){

if (div.onOff) {

div.val("Folge mir");

div.css({" Hintergrund":'#ccc' });

div.onOff = false;

} else {

div.css({"background":'red'} );

div.val("Bereits gefolgt");

div.onOff = true;

}

});

});

Der Implementierungseffekt ist wie folgt

Es ist ersichtlich, dass der JS-Code einfach zu verwenden ist. Sie können auch den Bildwechseleffekt erzielen, wie unten gezeigt

Die Implementierung Der Code lautet wie folgt

html:

css: Achten Sie auf den Bildpfad

.div{

background-image: url(img/guanzhu.png);

width: 100px; Höhe: 40px;Hintergrundgröße:80px;Hintergrundwiederholung: keine Wiederholung;

}

JS-Code

$(document).ready(function(){

var onOff=true;

var div=$(".div");

div.click( function(){

if (div.onOff) {

div.css({"background-image":'url(img/guanzhu.png)'});

div.onOff = false;

} else {

div.css({"background-image":'url(img/yiguanzhu.png)'});

div.onOff = true;

}

});

});

Das obige ist der detaillierte Inhalt vonWie realisiert JQuery die Funktionen „Click to Follow“ und „Unfollow“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!