拥有JavaScript适用于PHP Foreach循环创建的多个元素

Question

我有这个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++;

我的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';
        }

     };
  };

Answer 1

您的代码很奇怪...为什么要循环一百次选择一个元素？

您应该查看QuerySelector和QuerySelectorall，可以使用CSS选择器选择任何内容。例如：

document.querySelectorAll('.like');

将返回一个节点列表（您可以循环循环），其中包含每个元素class =" kike"

在这种情况下，您可能需要在每个元素上添加事件侦听器。您可以想象这样的事情：

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

如果您不喜欢QuerySelectors，您仍然还有其他一些方法可以选择多个元素，例如：

• getElementsByClassName

• getElementsbytagname

另外，您不应该覆盖样式属性。在项目上很容易找到初始状态和变化状态更舒适。也许您应该想到一个类的类（例如），这就是这样：

.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 < length; i++) {
     likes[i].addEventListener('event', myFunction);
}
function myFunction() {
     this.classList.toggle('hidden');
}

Answer 2

如果我没有错，您想要/不喜欢perticular视频，然后尝试

onclick on like/dist/dist/dist image图标。

onclick="user_responce(responce,id)"

在哪里，

响应：-1：喜欢，2：不喜欢

id： - 唯一视频ID

in user_responce 函数函数按照响应做您想做的事情。

希望这项工作适合您。