Сравнение результатов массива и затем отображение элементов аудио

Question

Я пытаюсь сравнить результаты 2 массивов, а затем сделать соответствующие элементы видимыми.

Я передаю список из контроллера и устанавливаю идентификаторы и имена элементов, используя значения из модели. Я могу получить значения из отмеченных флажков и этих предупреждений правильно, но когда я пытаюсь получить значения из соответствующих звуковых тегов, я получаю неопределенный.

<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-коллекцию в массив и перебрал их, вы можете проверить мои комментарии и реализовать их самостоятельно.

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">