Question

我有以下问题。我尝试制作某种“视频选择屏幕”，在该屏幕上，您可以选择要观看的视频类型，还可以选择在播放视频时要听的音乐类型（每个视频文件都有一个视频文件可能的选择）。我试图编写一个函数来更改视频的src，但我无法使其正常工作，我也不知道为什么。

到目前为止，这是我的代码：

HTML：

<form>
<h3>Customize your own Showreel</h3>
                        <fieldset>
                                <input type="radio" id="commercials" name="selection" value="com">
                                <label for="commercials">Commercials</label>

                                <input type="radio" id="mixed" name="selection" value="mix" checked="checked">
                                <label for="mixed">Mixed</label>

                                <input type="radio" id="videoclip" name="selection" value="vid">
                                <label for="videoclip">Videoclips</label>
                        </fieldset>

<h4>Select Music</h4>
                    <fieldset>
                        <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
                        <label for="pop">Pop</label>
                        <input type="radio" id="rock" name="musicselection" value="rock">
                        <label for="rock">Rock</label>
                    </fieldset>

                    <video id="theVideo" controls></video>
                    <button type="button" id="theVideo" onclick="playselected();">play</button>

</form>

Javascript：

function playselected() {
              var music = document.getElementsByName("musicselection");
              var selection = document.getElementsByName("selection");
              var theVid = document.getElementById("theVideo");

                if (music.value == "com" && selection.value == "pop") {
                    theVid.src = "videos/com_pop.mp4";
                }

                if (music.value == "com" && selection.value == "rock") {
                    theVid.src = "videos/com_rock.mp4";
                }
                if (music.value == "mix" && selection.value == "pop") {
                    theVid.src = "videos/mix_pop.mp4";
                }
                if (music.value == "mix" && selection.value == "rock") {
                    theVid.src = "videos/mix_rock.mp4";
                }
                if (music.value == "vid" && selection.value == "pop") {
                    theVid.src = "videos/vid_pop.mp4";
                }
                if (music.value == "vid" && selection.value == "rock") {
                    theVid.src = "videos/vid_rock.mp4";
                }
            }

这就是我想出的。我希望我解决这个问题的尝试甚至指向正确的方向。（我是javascript和html的新手，并且我正在教自己如何编码。请不要太苛刻）

Answer 1

这是因为getElementsByName返回一个NodeList，这意味着您必须遍历集合才能访问所选单选按钮的值。因此，您可以使用Array.prototype.slice.call(<NodeList>)将NodeList转换为数组，对其进行过滤以返回选中的单选按钮，然后使用其访问其值：

var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {
  return musicRadioButton.checked;
})[0].value;

var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
  return selectionRadiobutton.checked;
})[0].value;

上面代码块的进一步说明：

Array.prototype.slice.call(music)将music NodeList转换为元素数组
然后，我们使用.filter()浏览返回的数组。在回调中，我们确保仅对选中的单选按钮进行选择/过滤，即.checked属性返回真实值。
在[0]通话之后将.filter()链接到第一个选中的单选按钮
束缚.value以获取第一个选中的单选按钮的值

然后在if / else块中，而不是检查music.value或selection.value，而可以引用musicValue和selectionValue：

function playselected() {
  var music = document.getElementsByName("musicselection");
  var selection = document.getElementsByName("selection");
  var theVid = document.getElementById("theVideo");

  var musicValue = Array.prototype.slice.call(music).filter(function(musicRadioButton) {

    return musicRadioButton.checked;
  })[0].value;
  var selectionValue = Array.prototype.slice.call(selection).filter(function(selectionRadioButton) {
    return selectionRadiobutton.checked;
  })[0].value;

  if (musicValue == "com" && selectionValue == "pop") {
    theVid.src = "videos/com_pop.mp4";
  }

  if (musicValue == "com" && selectionValue == "rock") {
    theVid.src = "videos/com_rock.mp4";
  }
  if (musicValue == "mix" && selectionValue == "pop") {
    theVid.src = "videos/mix_pop.mp4";
  }
  if (musicValue == "mix" && selectionValue == "rock") {
    theVid.src = "videos/mix_rock.mp4";
  }
  if (musicValue == "vid" && selectionValue == "pop") {
    theVid.src = "videos/vid_pop.mp4";
  }
  if (musicValue == "vid" && selectionValue == "rock") {
    theVid.src = "videos/vid_rock.mp4";
  }
}

<form>
  <h3>Customize your own Showreel</h3>
  <fieldset>
    <input type="radio" id="commercials" name="selection" value="com">
    <label for="commercials">Commercials</label>

    <input type="radio" id="mixed" name="selection" value="mix" checked="checked">
    <label for="mixed">Mixed</label>

    <input type="radio" id="videoclip" name="selection" value="vid">
    <label for="videoclip">Videoclips</label>
  </fieldset>

  <h4>Select Music</h4>
  <fieldset>
    <input type="radio" id="pop" name="musicselection" value="pop" checked="checked">
    <label for="pop">Pop</label>
    <input type="radio" id="rock" name="musicselection" value="rock">
    <label for="rock">Rock</label>
  </fieldset>

  <video id="theVideo" controls></video>
  <button type="button" id="theVideo" onclick="playselected();">play</button>

</form>

通过单选按钮“视频选择屏幕”

1 个答案: