jquery suka dan membatalkan kesan

Dengan peningkatan media sosial, suka telah menjadi cara popular untuk bersosial. Sama ada platform media sosial, blog, tapak web atau aplikasi mudah alih, suka telah menjadi bahagian penting dalam banyak aplikasi tapak web. WordPress, Weibo, WeChat, Facebook, Zhihu dan platform lain semuanya menyediakan pengguna dengan fungsi yang sama, yang menambah interaktiviti dan aktiviti kepada pengendalian tapak web.

Dalam artikel ini, kita akan belajar cara melaksanakan kesan suka dan batal jQuery, menyepadukan fungsi serupa pada tapak web dan meningkatkan pengalaman interaksi pengguna.

Pertama sekali, kita perlu menyediakan beberapa kerja persediaan. Dalam contoh ini, kami akan mencipta butang Suka yang lebih mudah sedikit. Kami memerlukan beberapa kod HTML:

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

Kami boleh menggunakan gaya CSS biasa untuk merapikan penampilan butang suka dan pembilang.

Langkah kedua ialah menulis skrip jQuery Di sini, kita perlu memproses pemantauan peristiwa klik dan status seumpamanya.

Mula-mula perkenalkan perpustakaan jQuery ke dalam HTML:

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

Kemudian tulis skrip 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);
    }
 
  });
 
});

Mari kita menganalisis kod baris demi baris:

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

Kami menggunakan Pembolehubah untuk menjejak status suka semasa, false bermaksud yang suka tidak dipilih.

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

Buat kaunter dan tetapkan bilangan suka pada mulanya kepada 10.

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

Gunakan pemilih jQuery untuk memilih butang suka pada halaman dan mengikat fungsi panggil balik pada acara klik.

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

Kendalikan acara klik butang secara berurutan. Kami menyemak nilai isLiked dan jika ia false bermakna butang semasa tidak dipilih kemudian tetapkannya kepada true dalam fungsi pengendali. Kami mengemas kini teks butang, mengemas kini nilai pembilang dan menetapkan isLiked kepada true. Ini akan menghadapi satu lagi gelung bersyarat sehingga status suka tidak lagi tersedia.

});

Lengkapkan fungsi pemprosesan acara klik dan tamatkan penutupan.

Akhir sekali, kami boleh mendayakan butang suka kami dengan cara berikut:

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

Gaya butang yang diberikan dalam contoh boleh dicantikkan melalui CSS. Selain itu, kita juga boleh menggayakan kaunter.

Ringkasnya, anda boleh mengubah suai gaya, menambah fungsi dan melaraskan logik kod mengikut keperluan anda untuk menyesuaikan diri dengan halaman tapak web anda.

Atas ialah kandungan terperinci jquery suka dan membatalkan kesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!