Question

我的主页面包含许多PartialViews

这是我的Index.cshtml

<div class="container">
    @{
        foreach (var summary in Model.Summaries)
        {
            <div class="partialViewWrapper">
                @Html.Partial("_Summary", summary)               
            </div>
        }
    }
</div>

这是我的Javascript：

$(document).ready(function() {
    $(".toggle").on("click",
        function() {
            var btn = $(this);
            var state = btn.html();
            if (state === 'Show Down Times') {
                btn.html('Hide Down Times');
                $('.foo').show();
            } else {
                btn.html('Show Down Times');
                $('.foo').hide();
            }

我的部分视图（相关位）：

<div class="row">
        <div class="col-md-12">
            <button class="toggle btn btn-default" >Show Down Times</button>
        </div>
        <div class="foo col-md-12" style="display: none">
            <table class="table table-striped table-bordered table-responsive">
            ...
            </table>
         </div>
</div>

我的问题是，当我点击第一个局部视图上的按钮时，它会将其文本更改为“隐藏显示”，但两个“局部视图”都会显示其各自的表格。

因此，更改按钮文本的JS正在应用于正确的局部视图按钮，但是显示/隐藏表格正在应用于所有局部视图。

我认为我需要用$（this）做一些事情，而不是仅仅按类引用它，但我不知道如何用JQuery实现它。

谢谢，

Answer 1

使用相对选择器获取包含两个元素的.closest()祖先，然后.find()该祖先中的另一个元素。

var btn = $(this);
var foo = btn.closest('.row').find('.foo');
if (state === 'Show Down Times') {
    btn.html('Hide Down Times');
    foo.show();
} else {
    btn.html('Show Down Times');
    foo.hide();
}

Answer 2

原因是$('.foo')。因为您没有指出特定部分的表格。选择器选择具有类foo的所有类。

此问题的解决方案是

<强>要么

使用parent和next函数选择父级的兄弟，然后使用btn，然后使用hide或show。

或

在按钮中添加一个额外的属性data-target，并添加类或ID的名称。使用btn.data('target')访问它，然后使用hide或show。

MVC PartialViews和JQuery，JS应用于所有PartialViews

2 个答案: