如何為我的網頁制作一個贊按鈕？-有解無憂

我正在制作一個網頁，其中我有不同的“圖片”，我想要喜歡按鈕，當人們喜歡它時，數字會保持不變，然后他們只能喜歡每張圖片一次。我找到了一個我喜歡的代碼，但是當我重繪頁面時，所有的喜歡都消失了。我希望他們留下來。我不是最擅長解釋或理解大聲笑。

這是我發現我喜歡的代碼，但我想在我重繪時運行它。功能類似于“投票”按鈕。

/* 
 * Love button for Design it & Code it
 * http://designitcodeit.com/i/9
 */
$('.btn-counter').on('click', function(event, count) {
  event.preventDefault();
  
  var $this = $(this),
      count = $this.attr('data-count'),
      active = $this.hasClass('active'),
      multiple = $this.hasClass('multiple-count');
  
  // First method, allows to add custom function
  // Use when you want to do an ajax request
  /* if (multiple) {
  $this.attr('data-count',   count);
  // Your code here
  } else {
  $this.attr('data-count', active ? --count :   count).toggleClass('active');
  // Your code here
  } */
  
  // Second method, use when ... I dunno when but it looks cool and that's why it is here
  $.fn.noop = $.noop;
  $this.attr('data-count', ! active || multiple ?   count : --count  )[multiple ? 'noop' : 'toggleClass']('active');
  
});

html {
  background: #f5f5f5;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
  margin: 30px auto 0 auto;
  width: 450px;
  font-size: 75%;
}

h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #555;
}

p { padding-left: 10px; }


/*
 * Basic button style
 */
.btn {
  box-shadow: 1px 1px 0 rgba(255,255,255,0.5) inset;
  border-radius: 3px;
  border: 1px solid;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  position: relative;

  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
/*
 * Counter button style
 */
.btn-counter { margin-right: 39px; }
.btn-counter:after,
.btn-counter:hover:after { text-shadow: none; }
.btn-counter:after {
  border-radius: 3px;
  border: 1px solid #d3d3d3;
  background-color: #eee;
  padding: 0 8px;
  color: #777;
  content: attr(data-count);
  left: 100%;
  margin-left: 8px;
  margin-right: -13px;
  position: absolute;
  top: -1px;
}
.btn-counter:before {
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');

  background-color: #eee;
  border: 1px solid #d3d3d3;
  border-right: 0;
  border-top: 0;
  content: '';
  position: absolute;
  right: -13px;
  top: 5px;
  height: 6px;
  width: 6px;
  z-index: 1;
  zoom: 1;
}
/*
 * Custom styles
 */
.btn {
  background-color: #dbdbdb;
  border-color: #bbb;
  color: #666;
}
.btn:hover,
.btn.active {
  text-shadow: 0 1px 0 #b12f27;
  background-color: #f64136;
  border-color: #b12f27;
}
.btn:active { box-shadow: 0 0 5px 3px rgba(0,0,0,0.2) inset; }
.btn span { color: #f64136; }
.btn:hover, .btn:hover span,
.btn.active, .btn.active span { color: #eeeeee; }
.btn:active span {
  color: #b12f27;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

<h3>Basic button</h3>
<p>
  <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter - active/inactive</h3>
<p>
  <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn btn-counter" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

<h3>Button with counter for people who likes to  click</h3>
<p>
  <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span></a>
  <a href="#" title="Love it" class="btn btn-counter multiple-count" data-count="0"><span>&#x2764;</span> Love it</a>
</p>

uj5u.com熱心網友回復：

您實際上需要后端，但這是一個快速的解決方案。

注意：代碼在片段中不起作用，但它經常起作用

W3: Window localStorage
Mozilla Window.localStorage

let btn = document.querySelector('#like');
let result = document.querySelector('#result');

localStorage.setItem('likes', 0);
result.innerHTML = localStorage.getItem('likes');

btn.addEventListener('click', addLike());

function addLike(){
  localStorage.setItem('likes',  parseInt(localStorage.getItem('likes'))   1);
  result.innerHTML = localStorage.getItem('likes');
}

<button id="like">LIKE</button>
<p id="result"></p>

要查看本地存盤，請轉到 DevTools 打開應用程式選項卡，查看那里的本地存盤，您可以手動管理它

uj5u.com熱心網友回復：

我個人沒有得到你的代碼或它的結構，但我可以給你一個建議。不要復制和粘貼代碼，最好去全面研究如何制作點贊按鈕演算法，應該有很多鏈接可以解釋你。我想用這段代碼幫助你，但我似乎什么都不懂。觀看教程或進行更好的研究，您將完成它。分解你的問題，進行研究，忘記復制代碼。你不會學到任何東西。我希望這有助于作為一種動力。:)

uj5u.com熱心網友回復：

因此，讓我們從 HTML 和 CSS 開始，使我們的組件成為靜態的。我已經為你創建了 HTML 和 CSS。但如果你想改變它，請繼續做你的口味。

<button class="btn btn-like">
    <span class="btn-icon btn--icon-default">
        <span class="fa fa-heart"></span>
    </span>
    <span class="btn-icon btn--icon-liked">
        <span class="fa fa-heart"></span>
    </span>
    <span class="btn-content  btn-content--liked">
        Liked
    </span>
    <span class="btn-content btn-content--default">
        Like
    </span>
</button>

我們在標簽中構建所有內容，就像我們應該使用按鈕一樣。我為影片按鈕的內容和圖示添加了一些標簽。如果我們不這樣做，影片將無法作業。

:root {
    --red: rgb(209, 3, 3);
    --white: #fff;
    --black: #000;
}
.btn {
    width: 200px; height: 88px;
    outline: 0;
    border: 2px solid #ccc;
    color: #000;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    display:flex;
    justify-content: space-between;
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.05);
    transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}
.btn:hover {
    box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
    border-color: var(--red);
}
.btn-like {
    padding: 1.5rem 1.5rem 1.5rem 6rem;
    font-size: 2rem;
    border-radius: 10px;
    background: #fff;
    transition: 1.5s cubic-bezier(.21,.04,.26,.99);
}
.btn-like.liked {
    background: var(--red);
    border-color: var(--red);
}
/*-- Button Icon -- */
.btn-icon {
    display: inline-block;
    width: 32px;
    height: 36px;
    position: absolute;
    left: 1.5rem;
    transition: 1s cubic-bezier(.21,.04,.26,.99);
    transform: rotate(0deg)
}
.btn:hover .btn-icon {
    color: var(--red);
}
.btn.liked:hover .btn-icon {
    color: var(--black);
}
.liked .btn--icon-default {
    transform: rotate(-90deg)
}
.btn:not(.liked).btn--icon-liked {
    transform: rotate(-90deg)
}
.liked .btn--icon-default,
.btn--icon-liked {
    opacity: 0;
    color: #fff;
    position: absolute;
}
.btn--icon-default,
.liked .btn--icon-liked {
    opacity: 1;
    left: 1.5rem;
}
/*-- Button Content -- */
.btn-content {
    transition: transform 0.1s ease;
    display: inline-block;
    /* position: absolute;
    right: 0; */
}
.liked .btn-content {
    color: var(--white);
}
.btn:hover.liked .btn-content {
    color: var(--black);
}
.btn:not(.liked) .btn-content--liked {
    transform: translate(110px)
}
.btn:not(.liked) .btn-content--default {
    transform: translate(-56px)
}
.liked .btn-content--default {
    transform: translate(24px)
}

和JS

const button = document.querySelector('.btn')

button.addEventListener('click', () => {
    button.classList.toggle('liked')
})

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/421807.html

標籤：

上一篇：在資料庫呼叫后回傳承諾并使用它時遇到問題

下一篇：如何在反應中將完整的實時日期和時間添加到標題組件？