Javascript 使用活动的“li”元素确定视频的源文件

我尝试创建一个小的视频库，其中一个div分为两部分：1左边是一个菜单，其中包含电影的标题；2右边的div的其余部分是一个视频窗口，根据菜单上选定的标题更改其视频源。我给出了包含标题id的li元素，并使用jQuery/JavaScript检索标题，并根据标题分配新的视频源，但它不起作用，我也不能声称完全理解我所做的工作。代码如下：

HTML

---

我不完全确定这段代码是解决我的问题的最佳方式，但它是我能想到的最符合逻辑的进展

不需要使用所有这些if块，您可以在一行语句中完成

你可以这样做：

function Hayato() {
  var movie = $("ul.menu li a.active").attr("id");
  if(movie && movie !== "#")
      document.getElementsByClassName('window')[0].video.source.src = movie + ".mkv";
}

注:

---

在您使用的代码中，所有字符串都是inavlid字符串，您应该将它们包装在两个或两个“.

之间，因为您还在这里为jQuery添加了一个工作示例：

$('.menu li a').on('click', function() {
    var id = $(this).attr('id');
  $('.window video source').attr('src', id + '.mkv');
});

---

注意：您的html也是无效的。ul永远不会关闭

由于大多数代码在所有情况下都保持不变，因此这可以大大简化。此外，您的结束语不是结束标记，您缺少结束语

//获取所有元素 var anchors=document.queryselectoral.menu a； //获取对视频元素的引用 var v=document.querySelectorvideo； //为每个项目设置单击事件处理程序 Array.prototype.slice.callanchors.forEachfunctionanchor{ anchor.addEventListenerclick，functionevt{ //不存在id时的默认视频 var d=格列佛mkv； //使用默认值或id v、 source=！anchor.id？d:anchor.id+.mkv； console.logvideo源为：+v.source； }; }; 格列佛游记 哈尔的移动城堡 Kiki的送货服务 卡戈利奥斯特罗城堡 我的邻居托托罗 波妞 红猪 莫诺克公主 千与千寻 天空城堡拉普塔 风之谷 猫回来了

---

你所有的字符串实际上都不是字符串…那么多复制粘贴。。。。使用数据属性并在单击元素时读取数据属性。getElementsByCassName返回一个HTML集合，并将其视为一个元素。和字符串，需要引号你可以把它压缩成一行。使用数据属性：仍然无法工作，因为getElementsByClassName@epascarello还有Porco Rosso Id。啊，好吧，我看到了，我一开始没有看到，我编辑了代码。@Steve，如果文件名是.mkv？我是否遗漏了一些我看不出有问题的东西？我忘记了那个文件，把它作为一个占位符放进去了，因为它突出了提醒我以后再填写它。抱歉造成混淆。如果视频元素中没有预设源，那么这可能会有问题吗？可以将其保留为空吗？@Woomfy没有它，代码可以正常工作，但HTML在技术上是无效的。因此，如果有效性对您很重要，请将源设置为默认值Gulliver.mkv。

function Hayato() {
  var movie = $("ul.menu li a.active").attr("id");
  if(movie && movie !== "#")
      document.getElementsByClassName('window')[0].video.source.src = movie + ".mkv";
}

$('.menu li a').on('click', function() {
    var id = $(this).attr('id');
  $('.window video source').attr('src', id + '.mkv');
});