Question

我是mvc5的新手。我面临的一个问题是，我想在每个行中使用单选按钮在表中呈现一些行。如果我点击或选中了单选按钮，那么它将显示该行中的图片。现在的问题是，我试图通过点击测试每一行，但结果只有一行显示警报，这只是第一行。哪个问题我不知道？你能帮我解决一下这个问题吗？

@if (Model != null) { 
foreach (var item in Model) {
    <tr style="vertical-align:middle">
        <td style="vertical-align:middle">
            @Html.DisplayFor(modelItem => item.CandId)
        </td>
        <td style="vertical-align:middle">
            @Html.DisplayFor(modelItem => item.CandName)
        </td>
        <td style="vertical-align:middle">
            @Html.HiddenFor(modelItem => item.Position, new {id="ps" })
        </td>
        <td style="vertical-align:middle">
            <img src="/Ballot/RetrieveImage/@item.id" alt="" height=50 width=50/>
            @*@Html.DisplayFor(modelItem => item.cand_symbol)*@
        </td>
        <td style="vertical-align:middle; text-align:center;">
           @Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { id="rd",name="rd"})
            <img src="" height="50" width="50" id="picture" hidden />
    </tr>
}
}
  $("#rd").click(function () {
                $('#picture').attr('src', '/Images/vt.png');
                var ps = $('#ps').val();
                alert(ps);
                $(picture).show();
   });

Answer 1

你正在渲染具有相同id的多个元素，这是它不起作用的原因，它总是会触发它在具有该id的DOM中找到的第一个项目的事件。

将其更改为类并在类选择器上添加click事件：

@Html.HiddenFor(modelItem => item.Position, new {@class="ps" })
@Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { @class="rd",name="rd"})
<img src="" height="50" width="50" class="picture"/>

和js：

$(".rd").click(function () {
  var picture = $(this).closest("tr").find('.picture').attr('src', '/Images/vt.png');
  var ps = $(this).closest("tr").find('.ps').val();
  $(picture).show();
});

如何在表格中动态渲染单选按钮？

1 个答案: