用普通的JavaScript写出一个Like按钮特性
用普通的JavaScript写出一个Like按钮特性
提问于 2020-12-09 03:09:57
因此，我想为JS中的like按钮功能编写一个函数。下面是我到目前为止所知道的。下面我尝试在我的getSneakers()函数中插入我的特性，因为我希望在所有单独的运动鞋上显示like按钮特性。
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>
`
}请让我知道如果我的方法是不正确的，如果你也可以提供任何文档。谢谢!
回答 1
Stack Overflow用户
发布于 2020-12-09 03:29:19
这应该会有帮助：https://codepen.io/enukeron/pen/qBaZNbb我昨天就做了，如果你有更多的问题，请不要犹豫。我认为你的特性可以很容易地与我的代码进行调整。
需要放入代码来添加链接，但代码会更方便
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;
}
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65205327
复制相关文章
相似问题
腾讯云开发者
