Передача html формы параметров в js файл и получение правильных действий от кнопок в цикле

Question

Я новичок в HTML и JS.Моя таблица может получить некоторые данные из моей базы данных и отобразить их в виде таблицы.У меня есть цикл, который отображает путь к файлу, метку времени и т. Д. Для каждого файла у меня есть простой видеопроигрыватель, который может отображать текущее видео с указанием пути к файлу.

Моя первая проблема заключается в том, что первый ряд работает отлично, когда я воспроизводю видео и нажимаю кнопку, он переходит к жестко заданному времени.Когда я нажимаю на кнопку второго ряда, это изменяет игрока первых рядов, как и каждая кнопка после первого.

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

Я попробовал что-то вроде `onclick =" setCurTime (10) "и в файле js

function setCurTime(int x) { 
    vid.currentTime= x;

} 

, но это не работает.

 @model IList<QualityControl.Models.Media>
@{
    ViewData["Title"] = "Quality Control";
}
<script src="@Url.Content(" ~/wwwroot/js/site.js")"></script>

@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
    <table class="table">
        <tr>
            <th>
                File Path
            </th>
            <th>
                Time Stamp
            </th>
            <th>
                Status
            </th>
            <th>
                Image
            </th>
            <th>
                Video Player
            </th>
            <th></th>
        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => Model[i].Filepath)
                    @Html.HiddenFor(model => Model[i].Filepath)
                </td>
                <td>
                    @Html.TextBoxFor(model => Model[i].Timestamp)
                    @Html.ValidationMessageFor(model => Model[i].Timestamp)
                </td>
                <td>
                    @Html.DisplayFor(model => Model[i].Status)
                    @Html.HiddenFor(model => Model[i].Status)
                </td>
                <td>
                    <img src="~/images/@Html.DisplayFor(model => Model[i].Filepath)" width="300" height="240" />
                </td>
                <td>
                    <button onclick="setCurTime()" type="button">Play current time</button>
                    <video id="myVideo" width="320" height="240" controls>
                        <source src="~/movies/@Html.DisplayFor(model => Model[i].Filepath)" type="video/mp4" />
                    </video>
                </td>
                <td></td>
            </tr>
        }
    </table>

    <td>
        <button type="submit">Save</button>
    </td>

}

мой файл JS

var vid = document.getElementById("myVideo");

function setCurTime() { 
    vid.currentTime= 55;

} 

Answer 1

Атрибуты Id предназначены для уникальной идентификации элементов, поэтому vid ссылается только на первый элемент видео. Вы можете присвоить видео элементам уникальные идентификаторы, и setCurTime примет идентификатор элемента в качестве аргумента, как вы предлагаете сделать со значением int x time. Другой подход заключается в том, чтобы прослушивать события в классе и динамически настраивать таргетинг на ближайший элемент видео (идентификатор не требуется!), Но это может быть за пределами вашего текущего понимания. В общем, рекомендуется не помещать javascript непосредственно в html с помощью атрибутов onclick или других атрибутов javascript, как это было в прошлом.

Что касается вашего второго вопроса, он терпит неудачу, потому что вы вводите переменную x, возможно? function setCurTime(int x) {} недействительно, function setCurTime(x) {/**/} является. Затем программист должен рассматривать x как int. Это одна из причин, по которой люди любят или ненавидят javascript, а также почему TypeScript является популярным способом написания javascript (вы действительно указываете типы и получаете предупреждения от компилятора при неправильном использовании и т. Д.)