Question

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

HTML 的

  <div class="miyazaki">
  <div class="menu">
    <ul>
      <li><a id="Gulliver">Gulliver's Travels</a></li>
      <li><a id="Howl">Howl's Moving Castle</a></li>
      <li><a id="Kiki">Kiki's Delivery Service</a></li>
      <li><a id="Castle">Castle of Cagoliostro</a></li>
      <li><a id="Totoro">"My Neighbor Totoro</a></li>
      <li><a id="Ponyo">Ponyo</a></li>
      <li><a id="Mononoke">"Princess Mononoke</a></li>
      <li><a id="Spirited">Spirited Away</a></li>
      <li><a id="Sky">The Sky's Castle Laputa</a></li>
      <li><a id="Nausicaa">Nausicaa Valley of the Wind</a></li>
      <li><a id="Cat">"The Cat Returns</a></li>
    </ul>
  </div>
  </div>

的JavaScript

function Hayato() {
var movie = $("ul.menu li a.active");
if (movie.id == Gulliver || movie.id == null || movie.id == "") {
  document.getElementsByClassName('window').video.source.src = Gulliver.mkv
}
else if (movie.id == Howl) {
  document.getElementsByClassName('window').video.source.src = Howl.mkv
}
else if (movie.id == Kiki) {
  document.getElementsByClassName('window').video.source.src = Kiki.mkv
}
else if (movie.id == Castle) {
  document.getElementsByClassName('window').video.source.src = Castle.mkv
}
else if (movie.id == Totoro) {
  document.getElementsByClassName('window').video.source.src = Totoro.mkv
}
else if (movie.id == Ponyo) {
  document.getElementsByClassName('window').video.source.src = Ponyo.mkv
}
else if (movie.id == Mononoke) {
  document.getElementsByClassName('window').video.source.src = Mononoke.mkv
}
else if (movie.id == Spirited) {
  document.getElementsByClassName('window').video.source.src = Spirited.mkv
}
else if (movie.id == Sky) {
  document.getElementsByClassName('window').video.source.src = Sky.mkv
}
else if (movie.id == Nausicaa) {
  document.getElementsByClassName('window').video.source.src = Nausicaa.mkv
}
else (movie.id == Cat) {
  document.getElementsByClassName('window').video.source.src = Cat.mkv
}
}

我不完全确定这段代码是解决问题的最好方法，但这是我能想到的最合乎逻辑的进展。

Answer 1

由于大多数代码在所有情况下保持不变，因此可以大大缩减。此外，您的结束<ul>不是一个关闭标记，并且您错过了结束<div>。

// Get all the <a> elements
var anchors = document.querySelectorAll(".menu a");


// Get a reference to the video element
var v = document.querySelector("video");

// Set up click event handlers for each
Array.prototype.slice.call(anchors).forEach(function(anchor){

  anchor.addEventListener("click", function(evt){
   
     // default video when no id is present
     var d = "Gulliver.mkv";
     
     // Use the default or the id
     v.source = (!anchor.id) ? d : anchor.id + ".mkv";
     
     console.log("video source is: " + v.source);
   }); 

});

<div class="miyazaki">
  <div class="menu">
    <ul>
      <li><a id="Gulliver">Gulliver's Travels</a></li>
      <li><a id="Howl">Howl's Moving Castle</a></li>
      <li><a id="Kiki">Kiki's Delivery Service</a></li>
      <li><a id="Castle">Castle of Cagoliostro</a></li>
      <li><a id="Totoro">"My Neighbor Totoro</a></li>
      <li><a id="Ponyo">Ponyo</a></li>
      <li><a>Porco Rosso</a></li>
      <li><a id="Mononoke">"Princess Mononoke</a></li>
      <li><a id="Spirited">Spirited Away</a></li>
      <li><a id="Sky">The Sky's Castle Laputa</a></li>
      <li><a id="Nausicaa">Nausicaa Valley of the Wind</a></li>
      <li><a id="Cat">"The Cat Returns</a></li>
    </ul>
  </div>
</div>

<video></video>

Answer 2

无需使用所有这些SELECT i.item_id, i.name, s.stock_id, s.quantity, NULL AS sales_item_id, NULL AS sales_id, NULL AS price FROM items AS i JOIN stocks AS s ON s.item_id = i.item_id UNION SELECT i.item_id, i.name, NULL, NULL, si.sales_item_id, si.sales_id, si.price FROM items AS i JOIN sales_item AS si ON i.item_id = si.item_id块，您可以在一行语句中执行此操作。

你可以这样做：

if

注意：

在您使用的代码中，所有字符串都是inavlid字符串，您应该将它们包含在两个function Hayato() { var movie = $("ul.menu li a.active").attr("id"); if(movie && movie !== "#") document.getElementsByClassName('window')[0].video.source.src = movie + ".mkv"; }或"之间。

Answer 3

正如你在这里为jQuery标记了一个工作示例：

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

<强> Example

注意：你的HTML也是无效的。 ul永不关闭

使用有效的“li”元素来确定视频的源文件

3 个答案: