Question

隐藏/显示在asp.net视图中对foreach循环的第一个元素工作正常，但是对于另一个元素不起作用。

脚本

 $('#SelectedContainer').hide();
 $(".data").click(function(e) {
    e.preventDefault();
    $('#BrowseContainer').hide();
    $('#SelectedContainer').show();
 });
 $("#goback").click(function(e) {
    e.preventDefault();
    $('#SelectedContainer').hide();
    $('#BrowseContainer').show();
 });

HTML ：

foreach (var ....){
<table border="1">
    <tr class="tableBody">
        <td>
            <div id="SelectedContainer" class="container-fluid">
                <div class="row-fluid">
                    <div><a id="goback" href="#">hide</a></div>
                    Test
                </div>
            </div>
            <div id="BrowseContainer" class="container-fluid">
                <div class="row-fluid container">
                    <a class="data" href="#">Show</a>
                </div>
            </div>
        </td>
    </tr>
</table>
}

我的问题是什么？

Answer 1

ID必须是唯一的，您应该使用通用类。您应该使用$.fn.closest()，然后您可以使用$.fn.find()来定位所需的元素。

在示例中，我使用了类而不是ID。

HTML 的

<table border="1">
    <tr class="tableBody">
        <td>
            <div class="SelectedContainer container-fluid">
                <div class="row-fluid">
                    <div><a class="goback" href="#">hide</a></div>
                    Test
                </div>
            </div>
            <div class="BrowseContainer container-fluid">
                <div class="row-fluid container">
                    <a class="data" href="#">Show</a>
                </div>
            </div>
        </td>
    </tr>
</table>

脚本

$('.SelectedContainer').hide();
$(".data").click(function (e) {
    e.preventDefault();
    var table = $(this).closest('table');
    table.find('.BrowseContainer').hide();
    table.find('.SelectedContainer').show();
});

$(".goback").click(function (e) {
    e.preventDefault();
    var table = $(this).closest('table');
    table.find('.SelectedContainer').hide();
    table.find('.BrowseContainer').show();
});

jquery hide / show仅适用于foreach

1 个答案: