javascript - Javascript EventListener 和 Element Selector 问题
问题描述
长话短说,我有一个 JavaScript 选择器问题。
我有一个循环,它创建了几个元素,每个元素都有相同的按钮和不同的输入值。单击按钮需要将关联的输入值增加 1,并更改纵横比(在 +1 和 -1 之间切换)。
我的问题是单击一个按钮会更改所有按钮的外观,并增加最后一个输入值的值而不是关联的值。
我已经尝试将 [i] 与选择器一起使用,以及 getElementsByNames 等等。
似乎不容易解释清楚,这可能会有所帮助: https ://codepen.io/enukeron/pen/qBaZNbb
谢谢你提供的所有帮助。
HTML:
<div class="photoGrid"> </div>
Javascipt:
const PhotographeID= 82;
var jsonFile = {
"media": [
{ "photographerId": 82, "likes": 82, },
{ "photographerId": 82, "likes": 62, }
]}
const photoLikes= document.getElementById ('photoLikes');
var photoGrid = document.getElementsByClassName('photoGrid')[0];
var heart= document.getElementById('heart');
var imageCard = document.getElementsByClassName('imageCard')[0];
function findId(jsonFile, idToLookFor) {
var media = jsonFile.media;
for (var i = 0; i < media.length; i++) {
if (media[i].photographerId == idToLookFor) {
// Creating Dom Elements
var imageCard = document.createElement('div');
imageCard.classList.add('imageCard');
photoGrid.appendChild(imageCard);
var photoInfos = document.createElement('div');
photoInfos.classList.add('photoInfos');
imageCard.appendChild(photoInfos);
var photoLikes = document.createElement('input');
photoLikes.classList.add('photoLikes');
photoLikes.setAttribute("type", "number");
photoLikes.setAttribute("value", media[i].likes);
photoLikes.readOnly = true;
photoInfos.appendChild(photoLikes);
var heart = document.createElement('span');
heart.classList.add('heart');
heart.classList.add(i);
photoInfos.appendChild(heart);
var faHeart= document.createElement('i');
faHeart.classList.add('fa');
faHeart.classList.add('fa-heart-o');
faHeart.setAttribute("aria-hidden", "true" );
faHeart.setAttribute("id", "faHeart");
heart.appendChild(faHeart);
// like button functions
var heartI= document.getElementsByClassName(i);
heart.addEventListener('click', (event) => {
if( heart.classList.contains("liked")){
$(".heart").html('<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").html('<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;
}
});
; } } }
findId(jsonFile, PhotographeID);
解决方案
Soooo,我让一切正常:https ://codepen.io/enukeron/pen/qBaZNbb?editors=1010
- 正如@kaiLehmann 所指出的,计数问题是由于误用了 Var 而不是 Const。
- 按钮一起改变的方面是由于使用了:
$(".heart").html('<i class="fa fa-heart" aria-hidden="true"></i>');
代替
heart.innerHTML='<i class="fa fa-heart" aria-hidden="true"></i>';
我不知道为什么,如果有人能解释其中的区别,希望一个是普通的 JS 而另一个是 Jquery,那就太好了!
推荐阅读
- javascript - ng2-file-uploader 需要浏览器刷新
- python - 在字典中获取对应的值
- php - API 身份验证问题
- xaml - 如何在周围元素中垂直居中对齐非常大的标签
- javascript - Testcafe:将客户端脚本代码注入 Worker Global Scope 以模拟丢失的 Web API
- python - 像在 R 中一样在 Python 中绘制 QQ 图
- amazon-web-services - 试图从容器内访问 EKS 集群
- javascript - 结构区块链的延迟
- c# - 如何从 ASP.NET Core MVC 中的字典模型和列表模型中获取匹配的记录
- rust - 编译完成后可以执行任务吗?