Question

我试图比较2个数组的结果，然后使相应的元素可见。

我正在从控制器传递一个列表，并使用模型中的值设置元素ID和名称。我可以从选中的复选框中获取值，并且这些值可以正确发出警报，但是当我尝试从相应的音频标签中获取值时，却无法定义。

<div style="display:none;" name="audioDiv" id="audioDiv">
    @foreach (var item in Model)
    {
         <div class="divclass" value="@item.Name" id="audioDiv" hidden>
            <h1> @item.Track - @item.Singer</h1>
            <audio controls id="audioPlayer" value="@item.Name">
                <source src="~/MP3s/@item.Name" type="audio/mp3" />
            </audio>
         </div>

    }
</div>

    function myFunction() {
        document.querySelector(".table").style.display = "none";
        var audionodes = document.getElementsByTagName('audio').value;
        alert(audionodes)
        var checkboxes = document.getElementsByName('playlist');

        var vals = "";
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            if (checkboxes[i].checked) {
                vals += "," + checkboxes[i].value;
            }
        }
        if (vals) vals = vals.substring(1);
        alert(vals);
        alert(audionodes)      



    }

我希望能够比较“ vals”和“ audionodes”的值，然后隐藏相应的音频元素。因此，例如-如果luis fonzi的复选框-despacito被打勾，则在单击提交时，我希望该音频元素可见，并且我已经隐藏了显示“播放列表”信息的表。

一个数组将具有复选框的值-因此是曲目名称的列表。第二个将包含每个隐藏音频元素的所有值-这是每首歌曲的值。比较它们之后，它将使适当的音频元素可见。

Answer 1

如果我理解正确，那么您正在尝试根据复选框选择显示音频，为此，您需要检查2个数组并显示它们，我将html集合转换为array并对其进行迭代，您可以检查我的评论并自行执行。

document.querySelector(".table").style.display = "none";
//getting all audio controls with element and its value
var audionodes = Array.from(document.getElementsByTagName('audio')).map(a => {
  return {
    element: a,
    value: a.getAttribute("value")
  }
});

//getting all the checkboxes checked
var checkboxes = Array.from(document.getElementsByTagName('input')).reduce((prev, next) => {
  if (next.checked) {
    prev.push(next.getAttribute("value"))
  }
  return prev;
}, []);

//filtering the audio control values with checkboxes and displaying them.
audionodes.filter(a => checkboxes.indexOf(a.value) >= 0).forEach(a => {
  a.element.style.display = "block";

});

audio {
  display: none
}

<table class="table">
  <audio value="luis fonzi - despacito">test</audio>
</table>
<input value="luis fonzi - despacito" name="playlist" checked type="checkbox">
<input value="luis fonzi - despacit1o" name="playlist1" type="checkbox">

比较数组结果，然后取消隐藏音频元素

1 个答案: