クリックフォローおよびキャンセル関数の jQuery 実装の例

このインターネットスラングは、オンラインコミュニティの「いいね」機能から来ています。あなたが送受信する「いいね！」の数、「いいね！」を与えるときの好みなどは、あなたが誰であるか、あなたがどのような状態にあるかをある程度反映することができます。 「いいね！」の後ろにはあなたが映っています。これに対応するのがキャンセル機能です。たまたま、ブロガーは最近 APP に取り組んでいたのですが、そのセクションの 1 つで「いいね！」と「キャンセル」機能を実装する必要があったため、考えた結果、JQuery コードを使用して実装することにしました。

まず、JQuery プラグインを導入する必要があります

次に、p を定義し、いくつかのスタイルを与える必要があります

次に、以下に示すように、JS コードがあります

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

実装効果は以下の通りです

同様に、画像切り替え効果も以下のように実現できます

実装コードは以下の通りです

html :

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

css: 画像パスに注意

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

JSコード

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

関連おすすめ:

認証に関する注意点まとめ

フォロー機能の解説

フォローに関するおすすめ記事10選イベント

以上がクリックフォローおよびキャンセル関数の jQuery 実装の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。