让javascript应用于php foreach循环创建的多个元素

我有一个php foreach循环，它读取保存在文件夹中的视频并将它们加载到我的页面中。 在视频下，我创建了一个喜欢和不喜欢按钮，我想使用javascript。 问题是，当我为按钮创建唯一ID时，我不知道如何将js指向按钮，foreach循环中有一个计数器

我的php

$i=1;
foreach($allfiles as $file) {
if($file != '.' && $file != '..' && $file != video/ini) // sikre den ikke 
producere . og .. files
{

echo "<div>
        <div>
                        <video width=\"$videoW\" height=\"$videoH\" 
controls>
                          <source src=\"". $dir . $file ."\" type=\"video/mp4\">
                          <source src=\"". $dir . $file ."\" type=\"video/ogg\">
                        </video>
                    </div>



<div><strong> Recorded:</strong> $file </div> </div>";

echo '<img src="/img/like-icon.png" id="like'.$i.'" 
style="width:40px;height:40px;">';
echo '<img src="/img/dislike-icon.png" id="dislike'.$i.'" 
style="width:40px;height:40px;">';
echo '<p style=display:none; id="text'.$i.'">Submitted!</p>';
$i++;

$i=1；
foreach（$allfiles作为$file）{
如果（$file！='.&&$file！='..'&&$file！=video/ini）//sikre den ike
producere.og..文件
{
回声“
录制：$file”；
回声'；
回声'；
echo'
已提交！
；
$i++；

我的javascript

<script type='text/javascript'>  
      for (var i = 0; i < 100; i++) {

        var button = document.getElementById(like[i]);
        var button2 = document.getElementById(dislike[i]);

        button.onclick = function() {
           var text = document.getElementById(text[i]);
           var like = document.getElementById(like[i]);
           var dislike = document.getElementById(dislike[i]);
           if (text.style.display !== 'none') {
              text.style.display = 'none';

           }
           else {
              text.style.display = 'block';
              like.style.display = 'none';
              dislike.style.display = 'none';
        }
     };

        button2.onclick = function() {
           var text = document.getElementById(text[i]);
           var dislike = document.getElementById(dislike[i]);
           var like = document.getElementById(like[i]);

           if (text.style.display !== 'none') {
              text.style.display = 'none';

           }
           else {
             text.style.display = 'block';
             like.style.display = 'none';
             dislike.style.display = 'none';
        }


     };
  };

对于（变量i=0；i<100；i++）{
var button=document.getElementById（类似于[i]）；
var button2=document.getElementById（不喜欢[i]）；
button.onclick=函数（）{
var text=document.getElementById（text[i]）；
var like=document.getElementById（like[i]）；
var ANSIKE=document.getElementById（ANSIKE[i]）；
如果（text.style.display！=“无”）{
text.style.display='none'；
}
否则{
text.style.display='block'；
like.style.display='none'；
dislike.style.display='none'；
}
};
button2.onclick=函数（）{
var text=document.getElementById（text[i]）；
var ANSIKE=document.getElementById（ANSIKE[i]）；
var like=document.getElementById（like[i]）；
如果（text.style.display！=“无”）{
text.style.display='none'；
}
否则{
text.style.display='block'；
like.style.display='none'；
dislike.style.display='none'；
}
};
};

---

如果我没有错，你想要喜欢/不喜欢特定的视频，那么试试看

单击喜欢/不喜欢图像图标上的事件

onclick="user_responce(responce,id)"

在哪里,

回答：-1：喜欢，2：不喜欢

id:-唯一视频id

在用户响应功能中，根据响应执行您想要的操作

---

希望这对您有用。

您的代码非常奇怪……为什么要循环100次来选择一个元素

您应该了解如何使用css选择器选择任何内容。例如：

document.querySelectorAll('.like');

将返回一个包含class=“like”的每个元素的节点列表（可以循环）

在这种情况下，您可能希望在每个元素上添加一个事件侦听器

var likes = document.querySelectorAll('.like');

for (var i = 0, length = likes.length; i < length; i++) {
     likes[i].addEventListener('event', myFunction);
}

.hidden {
    display: none;
}

所以如果你想把它们全部隐藏起来，你只需要跑：

var likes = document.querySelectorAll('.like');

for (var i = 0, length = likes.length; i < length; i++) {
     likes[i].classList.add('hidden');
}

var likes=document.querySelectorAll（'.like'）；
for（var i=0，length=likes.length；i

如果这是行动的结果：

var likes = document.querySelectorAll('.like');

for (var i = 0, length = likes.length; i < length; i++) {
     likes[i].addEventListener('event', myFunction);
}

function myFunction() {
     this.classList.toggle('hidden');
}

var likes=document.querySelectorAll（'.like'）；
for（var i=0，length=likes.length；i

document.queryselectoral（'button'）；

。您可能更喜欢

document.getElementsByTagName（'button'））；

，或任何其他在Javascript中选择html节点的方法更好的方法是在按钮上使用相同的类名，并使用该类将处理程序分配给按钮，然后使用

this

确定处理程序中单击的按钮，并使用“relative”元素位置来更改附近元素的属性。您确实不需要唯一的id。您可以为每个按钮指定一个属性值来对它们进行分组，例如

data id='like'

或

data id='dishave'

，然后您可以使用

var-likeButtons=document.querySelector（'[data id=“like”]”）；

并循环使用它们

（var i=0；i

其中

liked

是对名为

var function liked（）{}的函数的引用

etc…包含您当前的代码。如果OP已经在代码中使用事件绑定，建议移入行将引入其他副作用，使HTML和脚本的分离变得更糟糕，更不易维护。请注意使用类。如果您的CSS人员正在使用这些类来设置页面样式，请小心他们可能在任何时候都会将它们一起删除。因此，在我们使用自定义属性时，让样式人员使用类会有很大的好处。最后一个需要的是相互依赖性，即样式人员无法对页面进行样式设置，因为代码可能会被破坏，而我们无法重构引用，因为我们可能会破坏页面的样式页面。但如果你能控制一切，最终它就不在这里也不在那里了。这是完全正确的，我应该更具体一些。我认为JavaScript已经实现了直接访问

data-x

属性的方法，这更安全，以防止CSS和JS之间的冲突