时间戳

首页 > 解决方案 > 用纯 JavaScript 写出一个 Like 按钮功能

javascript - 用纯 JavaScript 写出一个 Like 按钮功能

问题描述

所以我想在JS中写一个类似按钮功能的函数。以下是我到目前为止所拥有的。下面我尝试在我的 getSneakers() 函数中插入我的功能，因为我希望在所有单个运动鞋上显示类似按钮功能。

function getSneakers() {
  fetch(endPoint)
  .then(response => response.json())
  .then(sneakers => {

    const mappedSneakers = sneakers.data.map( e => e)
    mappedSneakers.sort( (a, b) => {
      
      if ( a.attributes.name < b.attributes.name ){
        return -1;
      }
      if ( a.attributes.name > b.attributes.name ){
        return 1;
      }
      return 0;
    })

    console.log(`sneakers.data are equal? ${sneakers.data == mappedSneakers}`)
  
    mappedSneakers.forEach(sneaker => {

        let newSneaker = new Sneaker(sneaker, sneaker.attributes)

        let sneakerContainer = document.querySelector('#sneaker-container')

        const likeButton = function myLike(x) {
          x.classList.toggle("fa-thumbs-down");
        }

        sneakerContainer.addEventListener("click", likeButton);
        sneakerContainer.innerHTML += newSneaker.renderSneakerCard();

    })
  })
}

有问题的代码行是：

const likeButton = function myLike(x) {
  x.classList.toggle("fa-thumbs-down");
}

我还认为我应该添加我想在我的 renderSneakerCard() 中显示的图标。以下是我目前拥有的。

renderSneakerCard() {
      return `
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src=${this.imageUrl} class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${this.name}</h5>
            <p class="card-text">${this.description}</p>
            <i onclick="myLike(this)" class="fa fa-thumbs-up"></i>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
                <button data-id=${this.id} id="edit" data-action="edit" data-name="${this.name}" data-description="${this.description}" data-image_url="${this.imageUrl}" data-category="${this.category}" type="button" class="btn btn-primary">Edit</button>
                <button data-id=${this.id} id="delete" data-action="delete" data-name="${this.name}" data-description="${this.description}" data-image_url="${this.imageUrl}" data-category="${this.category}"type="button" class="btn btn-primary">Delete</button>
              </div>
              <small class="text-muted">Category: ${this.category.name}</small>
            </div>
          </div>
        </div>
      </div>
      `
}

请让我知道我的方法是否不正确，以及您是否也可以提供任何文件。谢谢！

标签： javascriptevent-handling

解决方案

这应该会有所帮助：https ://codepen.io/enukeron/pen/qBaZNbb 我昨天做了，如果您有更多问题，请不要犹豫。我认为您的功能可以很容易地适应我的代码。

需要放代码加个链接，不过codepen会比较好用

             if( heart.classList.contains("liked")){
               heart.innerHTML='<i class="fa fa-heart-o" aria-hidden="true"></i>';
               heart.classList.remove("liked");
      
                 /*Removes 1 like */
                 var value = parseInt(photoLikes.value, 10);
                 value = isNaN(value) ? 0 : value;
                 value--;
                 photoLikes.value = value;  
                }
  
             else{
                heart.innerHTML='<i class="fa fa-heart" aria-hidden="true"></i>';                
                 heart.classList.add("liked");
    
                 /*adds 1 like */
                 var value = parseInt(photoLikes.value, 10);
                 value = isNaN(value) ? 0 : value;
                 value++;
                 photoLikes.value = value; 
                 }
            });

推荐阅读