Блог

Итак, я хотел бы написать функцию для функции кнопки 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>
      `
}
 

Пожалуйста, дайте мне знать, если моя методология неверна, а также можете ли вы предоставить какую-либо документацию. Спасибо!

Это должно помочь: 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; 
                 }
            });