在 JavaScript 中使用 Array.forEach 进行迭代答案

【问题标题】：Iterate using Array.forEach in JavaScript在 JavaScript 中使用 Array.forEach 进行迭代
【发布时间】：2018-12-28 20:42:49
【问题描述】：

我想为每个具有相同类名的视频使用此流体播放器功能。我听说我可以使用Array.forEach() 方法做到这一点，但我不知道怎么做。

我也尝试过使用普通的 for 循环，并在每个数组元素上执行 Fluid Player 函数，但它不起作用。

我做错了什么？

<!DOCTYPE html>
<html>

<body>
	 <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
	<script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>

</body>

<script type="text/javascript">
var array = document.getElementByClassName('classname');
Array.forEach(); 
</script>

<script type="text/javascript">
	 var myFP = fluidPlayer(
        'short',
        {
            layoutControls: {
    fillToContainer: false,
    primaryColor: false,
    posterImage: false,
    autoPlay: false,
    playButtonShowing: true,
    playPauseAnimation: true,
    mute: false,
    logo: {
      imageUrl: null,
      position: 'top left',
      clickUrl: null,
      opacity: 1,
      mouseOverImageUrl: null,
      imageMargin: '2px',
      hideWithControls: false,
      showOverAds: false
    },
    htmlOnPauseBlock: {
      html: null,
      height: null,
      width: null
    },
    allowDownload: false,
    allowTheatre: false,
    playbackRateEnabled: false,
    controlBar: {
      autoHide: true,
      autoHideTimeout: 1,
      animated: false
    },
            },
            vastOptions: {
            }
        }
    );
</script>
</html>

【问题讨论】：

Ehh ...你能告诉我们你想在迭代中做什么吗？此外，getElementByClassName 不返回数组，它返回一个 HTMLCollection 对象。尽管该对象在现代浏览器中具有 forEach 方法。
在我使用 getElementByClassName 函数制作的数组上
有点不清楚你在问什么，也许forEach 的文档有帮助..？
那么是否可以按照我现在使用的方式进行操作？
您当前的 fluidPlayer( 调用似乎没有接受任何与元素相关的参数，但...

标签： javascript html arrays for-loop

【解决方案1】：

你的问题措辞有点混乱

“我想对每个具有相同类名的视频使用这个流体播放器功能”

对每个类名做什么？

就 forEach 而言。

forEach 是一个接受函数的方法，您可以将函数传递给它以在目标数组的迭代上运行，也可以包含箭头函数或匿名函数，如下所示：

array.forEach(classname => console.log(classname))

// 如果 array = [1,2,3,4] 那么这将在单独的行上返回 1 2 3 和 4。

“array”数组的每个元素都将被迭代，并且该函数将为每个元素调用一次，将元素作为“classname”传递给函数，从中我们可以对它做任何我们想做的事情。您的数组称为“数组”，因此我们使用每个 javascript 数组中存在的原型方法 forEach。我们不需要使用数组。虽然有一些方法以这种方式工作（例如 Array.isArray(array) 会返回 true）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

【讨论】：

【解决方案2】：

对于要与 Fluid Player 一起使用的所有视频，您都拥有相同的 ID。除了不好的做法（元素 ID 应该是唯一的）之外，Fluid Player 仅适用于 ID，因此这些 ID 需要不同。您还使用了不存在的getElementByClassName()，您需要使用getElementsByClassName()。

getElementsByClassName() 实际上并不返回一个数组，它返回一个HTMLCollection，这并不完全相同。你想改用for x of y。

试试这个：

<!DOCTYPE html>
<html>

<body>
     <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
    <script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
    <video class="videoClass" id="short1" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
    <video class="videoClass" id="short2" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
    <video class="videoClass" id="short3" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
</body>

<script type="text/javascript">
var vidCollection = document.getElementsByClassName('videoClass');
for (let vidElement of vidCollection) {
    fluidPlayer(
        vidElement.id,
        {
            layoutControls: {
                fillToContainer: false,
                primaryColor: false,
                posterImage: false,
                autoPlay: false,
                playButtonShowing: true,
                playPauseAnimation: true,
                mute: false,
                logo: {
                  imageUrl: null,
                  position: 'top left',
                  clickUrl: null,
                  opacity: 1,
                  mouseOverImageUrl: null,
                  imageMargin: '2px',
                  hideWithControls: false,
                  showOverAds: false
                },
                htmlOnPauseBlock: {
                  html: null,
                  height: null,
                  width: null
                },
                allowDownload: false,
                allowTheatre: false,
                playbackRateEnabled: false,
                controlBar: {
                  autoHide: true,
                  autoHideTimeout: 1,
                  animated: false
                },
            },
            vastOptions: {}
        }
    );
}
</script>
</html>

【讨论】：

我在控制台日志中收到这条消息之王 Uncaught TypeError: vidArray.forEach is not a function
你能用getElementsByClassName()中的更新类名videoClass再试一次吗？
对不起，我不明白你的意思。我在 getElementsByClassName() 中使用与视频 html 标签相同的类名。
啊 - 我的错误，getElementsByClassName 不返回数组，它返回一个 HTMLCollection，它完全不一样。你想改用let x of y - 我会更新我的答案。
很好，现在可以使用了。非常感谢您的帮助:)