ホームページ  >  記事  >  ウェブフロントエンド  >  JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

WBOY
WBOYオリジナル
2017-07-24 17:14:161434ブラウズ

「同意」「愛」を意味するインターネット用語のようなもの。

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

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

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

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

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

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

$(document).ready(function(){

var onOff=true;

var div=$(".div");

div.click(function(){

if (div.onOff) {

div.val("フォローしてください");

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

div.onOff = false;

} else {

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

div.val("フォロー中");

div.onOff = true;

}

});

});

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

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

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

JQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますか

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

html:

css: 画像パスに注意してください

.div{

使用の使用 - 介して - - 40px;

varming = true;

var div=$(".div");

div.click(function(){

if (div.onOff) {

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

div.onoff = false;

以上がJQuery はクリックしてフォローしたりアンフォローしたりする機能をどのように実現しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。