jQuery-Implementierung von Click-Follow- und Cancel-Funktionsbeispielen

Dieser Internet-Slang leitet sich von der „Gefällt mir“-Funktion von Online-Communities ab. 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. Es kam vor, dass der Blogger kürzlich an einer APP arbeitete und einen der Abschnitte benötigte, um die Funktionen „Gefällt mir“ und „Abbrechen“ zu implementieren. Nachdem er darüber nachgedacht hatte, entschied er sich, JQuery-Code zu verwenden, um ihn zu implementieren.

Zuerst müssen wir das JQuery-Plug-in vorstellen

Zweitens müssen wir ein p definieren und ihm einige Stile geben

Dann gibt es den JS-Code, wie unten gezeigt

$(document).ready(function(){
  var onOff=true;
  var p=$(".p");
  p.click(function(){  
    if (p.onOff) {
     p.val("关注我");
     p.css({"background":'#ccc'});
     p.onOff = false;
    } else {
     p.css({"background":'red'});
      p.val("已关注");
     p.onOff = true;
    }
   });
  });

Der Effekt ist wie folgt

Sichtbarer JS-Code ist einfach zu verwenden. Ebenso können Sie den Bildwechseleffekt wie unten gezeigt erzielen

Der Implementierungscode lautet wie folgt

html:

<p class="p"></p>

css: Achten Sie auf den Bildpfad

.p{
     background-image: url(img/guanzhu.png);
     width: 100px;height: 40px;background-size:80px;background-repeat: no-repeat;
    }

JS-Code

$(document).ready(function(){
    var onOff=true;
    var p=$(".p");
    p.click(function(){  
      if (p.onOff) {
       p.css({"background-image":'url(img/guanzhu.png)'});
       p.onOff = false;
      } else {
       p.css({"background-image":'url(img/yiguanzhu.png)'});
       p.onOff = true;
      }
     });
    });

Verwandte Empfehlungen:

Zusammenfassung relevanter Vorsichtsmaßnahmen zur Verifizierung

Erklärung der Follow-Funktion

10 empfohlene Artikel zu Follow-Events

Das obige ist der detaillierte Inhalt vonjQuery-Implementierung von Click-Follow- und Cancel-Funktionsbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!