jqueryのいいね効果とキャンセル効果

ソーシャルメディアの台頭により、「いいね！」は交流の一般的な方法になりました。ソーシャル メディア プラットフォーム、ブログ、Web サイト、モバイル アプリのいずれであっても、「いいね!」は多くの Web サイト アプリケーションで不可欠な部分になっています。 WordPress、Weibo、WeChat、Facebook、Zhihu などのプラットフォームはすべて、Web サイトの操作に対話性とアクティビティを追加する同様の機能をユーザーに提供します。

この記事では、jQuery のいいね効果とキャンセル効果を実装し、Web サイトにいいね機能を統合し、ユーザー インタラクション エクスペリエンスを向上させる方法を学びます。

まず、いくつかの準備作業を準備する必要があります。この例では、もう少し単純な「いいね！」ボタンを作成します。いくつかの HTML コードが必要です:

<div class="like">
  <span class="count">10</span>
  <a href="#" class="like-btn">点赞</a>
</div>

通常の CSS スタイルを使用して、「いいね！」ボタンやカウンターの外観を整えることができます。

2番目のステップは、クリックイベントなどのステータスの監視処理を行うjQueryスクリプトの作成です。

まず、jQuery ライブラリを HTML に導入します:

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

次に、jQuery スクリプトを作成します:

$(document).ready(function() {
 
  // 初始化点赞状态
  var isLiked = false;
 
  // 初始化点赞计数器
  var count = 10;
 
  // 绑定点赞按钮点击事件
  $('.like-btn').click(function() {
 
    if (isLiked) {
      // 取消点赞状态
      isLiked = false;
      // 更新按钮文案
      $(this).text('点赞');
      // 更新点赞计数器
      $('.count').text(--count);
    } else {
      // 添加点赞状态
      isLiked = true;
      // 更新按钮文案
      $(this).text('取消');
      // 更新点赞计数器
      $('.count').text(++count);
    }
 
  });
 
});

コードを 1 行ずつ分析してみましょう:

// 初始化点赞状态
var isLiked = false;

変数を使用して現在のいいねのステータスを追跡します。false はいいねが選択されていないことを意味します。

// 初始化点赞计数器
var count = 10;

カウンターを作成し、最初にいいね数を 10 に設定します。

// 绑定点赞按钮点击事件
$('.like-btn').click(function() {

jQuery セレクターを使用してページ上の「いいね！」ボタンを選択し、クリック イベントにコールバック関数をバインドします。

if (isLiked) {
  // 取消点赞状态
  isLiked = false;
  // 更新按钮文案
  $(this).text('点赞');
  // 更新点赞计数器
  $('.count').text(--count);
} else {
  // 添加点赞状态
  isLiked = true;
  // 更新按钮文案
  $(this).text('取消');
  // 更新点赞计数器
  $('.count').text(++count);
}

ボタンのクリック イベントを順番に処理します。 isLiked の値を確認し、現在のボタンが選択されていないことを意味する false の場合は、ハンドラー関数で true に設定します。ボタンのテキストを更新し、カウンター値を更新して、isLiked を true に設定します。これは、同様のステータスが利用できなくなるまで、別の条件ループに直面します。

});

クリックイベント処理関数を完了し、クロージャを終了します。

最後に、次の方法で「いいね!」ボタンを有効にできます:

<div class="like">
  <span class="count">10</span>
  <button class="like-btn">点赞</button>
</div>

例でレンダリングされたボタン スタイルは、CSS を通じて美化できます。さらにカウンターのスタイリングも可能です。

要約すると、ニーズに応じてスタイルを変更し、機能を追加し、コード ロジックを調整して Web サイトのページに適応させることができます。

以上がjqueryのいいね効果とキャンセル効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。