Question

我有以下代码：

// video listing
for (var i = 0; i < videos.length; i++) {
    var videoid = videos[i].id.videoId;

    //more variables declared .....

    document.getElementById('videos').innerHTML += "<div>"
    + "<a href='#' onclick='showVideo(); return false'>" + videotitle + "</a>" + videodescription + ""
    + "</div>";  

});

在showVideo()中，我只是触发警报并且它有效，但我怎样才能传递参数？例如videoid到函数？我尝试使用

+ "<a href='#' onclick='showVideo(" + videoid + "); return false'>" + videotitle + "</a>" + videodescription + ""

但是我收到了错误。

Answer 1

在showVideo（）中，我只是触发一个警报，它可以工作。但是，如何才能将例如videoid的参数传递给函数？我尝试使用

实际上，您需要显示更多代码（或提供错误）才能诊断问题。它可以是任何东西，但请确保：

您的功能已收到值
您的id不是整数
您将值包装在引号字符串onclick="func(\"" + "<-- -->" + "\");"

实施例

"use strict";
setup();

// video listing
for (var i = 0, n = videos.length; i < n; i++) {
  var video = videos[i];
  var videoid = video.id.videoId;
  var videotitle = video.title;
  var videodescription = video.description;

  document.getElementById('videos').innerHTML += "<div>" +
    "<a href='#' onclick='showVideo(\"" + videoid + "\"); return false'>" + videotitle + "</a>" +
    videodescription + "" +
    "</div>";

}

function showVideo(videoid) {
  var el = document.getElementById(videoid);
  el.classList.remove('hidden');
}



function setup() {
  // setup
  window.videos = [{
    id: {
      videoId: 'foo'
    },
    title: 'Foo Title: ',
    description: 'All about the foo'
  }, {
    id: {
      videoId: 'bar'
    },
    title: 'Bar Title:',
    description: 'All about the bar'
  }];
}

.hidden {
  display: none;
}

.video {
  background: black;
  color: white;
  height: 100px;
  text-align: center;
  margin-top:2em;
  width: 300px;
}

<div id="videos"></div>
<div id="foo" class="hidden video">foo video</div>
<div id="bar" class="hidden video">bar video</div>

Answer 2

我的猜测是这一行;

var videoid = videos[i].id.videoId;

拥有id属性很奇怪，并且该属性是另一个ID的对象。我猜你只需要

var videoid = videos[i].id;

在dev中添加此行以确保您拥有ID;

if (typeof videoid === 'undefined') { throw new Error('could not find id for video ' + i); }

Answer 3

使用内联JS将变量传递给回调并不是一种好习惯。

使用 jQuery 它就像$('#elementId').on('click', callback)一样简单。

或者，只用JS：document.getElementById('elementId').onclick = callback。

在这两种情况下，callback都定义为function callback() {...}

Answer 4

我认为你在innerHTML绑定上犯了错误......试试下面的代码：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Loops</h2>

<p id="videos"></p>

<script>
var videos = [
{"id":"v1","title":"vedio1", "description":"This is 1st vedio"}, 
{"id":"v2","title":"vedio2", "description":"This is 2st vedio"},
{"id":"v3","title":"vedio3", "description":"This is 3st vedio"},
{"id":"v4","title":"vedio4", "description":"This is 4st vedio"}
];

videos.forEach (function(item, index) {
 document.getElementById('videos').innerHTML += "<div><a href='#' onclick='showVideo(&quot;"+ item.id +"&quot;); return false;'>" + item.title + "</a>" + item.description + "</div>";
});

function showVideo(vedioId){
debugger;
console.log(vedioId);
alert("I am vedio "+vedioId);
}
</script>

</body>
</html>

https://www.w3schools.com/code/tryit.asp?filename=FF93TNM1X0SD

从动态创建的链接执行JavaScript

4 个答案: