点赞按钮影响所有视频的问题

Question

在这里输入图片描述请检查img

我有视频/视频信息/喜欢按钮，正在通过下面的代码动态显示我的问题是，虽然我给了每个视频自己的id，他们都被点击和增加，当用户点击喜欢按钮。

我到底做错了什么?我解决这个问题的方法错了吗?你有什么建议?

-视频被附加到这个容器

<div class="videos"><!--video skeleton dev-->
<section class ="video-section">

</section>
</div>                            <!--end of video skeleton devs-->

包含视频信息的数组:

• src:是youtube嵌入"i帧数据">
• vcn:视频频道名称
• vtl:视频标题
• lkid: like key id
• iclkid:像键id的图标

let javaScript = [{src: "https://www.youtube.com/embed/7UMuJMiNjSk",lkid:"vid1",iclkid:"false" , vcn: "Web Dev Simplified",vt:  "Every JavaScript Developer Has Made This Mistake With Functions"},{src:"https://www.youtube.com/embed/XF1_MlZ5l6M", lkid:"vid2",iclkid:"false" , vcn: "Web Dev Simplified",vt: "Learn JavaScript Event Listeners In 18 Minutes"},
{src:"https://www.youtube.com/embed/s1XVfm5mIuU",lkid:"vid3",iclkid:"false" , vcn: "Web Dev Simplified",vt: "Learn JavaScript Array Reduce In 10 Minutes"}];

-附加函数:-

$(".batata").on("click", function () {  //   JAVASCRIPT RENDER
console.log("js clicked")
javaScript.forEach((item, i) => {
$(".video-section").append(`
<article class ="video-container">              
<a href="#" class="thumbnail">
<iframe width="560" height="315" src="${item.src}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</a>
<div class="video-bottom-section">
<a href="#">       
<img class="channel-icon" src="http:///unsplash.it/36/36?gravity=center" alt="Your Channel" /> 
</a>
<div class="video-details"> 
<a href="#" class="video-channel-name">${item.vcn}</a>
<a href="#" class="video-title"> ${item.vt} </a>
<button class="fixButtons"onclick="showVideoOne()">View</button>
<button class="fixButtonsCounter">
<span class= ${item.iclkid}   id="iconThree"><i class="far fa-thumbs-up"></i></span>
<span class = ${item.lkid}  id="countThree">0</span>
</button>
</div>  
</div> 
</article> `);
});
});

类按钮功能:-

let thumbsUp = false;
$(document).on("click", () => {
console.log("Farhan")
if (!thumbsUp) {
thumbsUp = true;
let y = 1
$(".icon55").html(`<i class="fas fa-thumbs-up"></i>`);       // how do i connect this ? with ${item.iclkid}
$(".count55").text(1);
} else {
thumbsUp = false;
let x = 1;
$(".icon55").html(`<i class="far fa-thumbs-up"></i>`);     // how do i connect this ? with ${item.lkid}
$(".count55").text(0);
}
});

Answer 1

解决方案:

var items = [{
src: "https://www.youtube.com/embed/7UMuJMiNjSk",
lkid: "vid1",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Every JavaScript Developer Has Made This Mistake With Functions"
}, {
src: "https://www.youtube.com/embed/XF1_MlZ5l6M",
lkid: "vid2",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Learn JavaScript Event Listeners In 18 Minutes"
},
{
src: "https://www.youtube.com/embed/s1XVfm5mIuU",
lkid: "vid3",
iclkid: "false",
vcn: "Web Dev Simplified",
vt: "Learn JavaScript Array Reduce In 10 Minutes"
}
];
$.each(items, function(index, value) {
$(".video-section").append('<article class ="video-container"><a href="#" class="thumbnail"><iframe width="560" height="315" src="' + value.src + '" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></a><div class="video-bottom-section"><a href="#"><img class="channel-icon" src="http:///unsplash.it/36/36?gravity=center" alt="Your Channel" /></a><div class="video-details"><a href="#" class="video-channel-name">' + value.vcn + '</a><a href="#" class="video-title">' + value.vt + ' </a><button type="text" class="video" id="' + value.lkid + '">View-' + value.lkid + '</button><button type="text" class="fixButtonsCounter"><span class= ' + value.iclkid + ' id="iconThree"><i class="far fa-thumbs-up"></i></span><span class="counter"  id="counter-' + value.lkid + '">0</span></button></div></div> ');
})
var votes;
var id;
var counter = 0;
$('.videos').find('.counter').attr('js-vote', 0);

$(".video").on("click", function() {
id = $(this).attr('id');
counter = $(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote');
counter++;
$(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote', counter);
votes = $(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').attr('js-vote');
$(this).nextUntil('.fixButtonCounter').find('#counter-' + id + '').text(votes);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="videos">
<section class="video-section">
</section>
</div>