Question

我有一个编辑器模板，显示有关我的模型的一些基本信息。我的模型包含一个“类型”（字符串），它被加载到下拉列表“电子邮件”或“日历”

我的EditorTemplate如下所示

 <div>
 //Hidden fields here
    <div  class="col-md-5">
        <div>
            @Html.LabelFor(m => m.First)        
        </div>
        <div>
            @Html.TextBoxFor(m => m.First)      
        </div>
        <div>
            @Html.LabelFor(m => m.Second)       
        </div>
        <div>
            @Html.TextBoxFor(m => m.Second)     
        </div>
        <div>
            @Html.LabelFor(m => m.Type)
        </div>
        <div>
            @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
            @Html.ValidationMessageFor(m => m.Type)
        </div>
    </div>
    <div  class="col-md-5">
        <div class="container">
            <div class="EmailDiv">
                //More data here            
            </div>
            <div class="CalendarDiv">
                //More data here            
            </div>
        </div>
    </div>
 </div>

EditorTemplate在选项卡中使用，因此每个枚举都放在一个单独的选项卡中。

我有以下脚本

$(document).ready(function () {
    $(".EmailDiv").hide();
    $(".CalendarDiv").hide();
    // Set initial visibility
    $('.TypeSelector').each(function (index, item) {
        var container = $('.EmailDiv').closest('.container');
        if ($(this).val() == 'Calendar') {
            container.find('.CalendarDiv').show();
        } else if ($(this).val() == 'Email') {
            container.find('.EmailDiv').show();
        }
    });

    // Update visibiity on selection
    $('.TypeSelector').change(function () {

        var container = $('.EmailDiv').closest('.container');
        if ($(this).val() == 'Calendar') {
            container.find('.CalendarDiv').show();
            container.find('.EmailDiv').hide();
        } else if ($(this).val() == 'Email') {
            container.find('.EmailDiv').show();
            container.find('.CalendarDiv').hide();
        } else { // this may or may not be necessary
            container.find('.EmailDiv').hide();
            container.find('.CalendarDiv').hide();
        }
    });

});

我的问题是;

当我的模型包含2个具有不同“类型”（电子邮件，日历）的项目时，视图会显示两个div，直到我在下拉列表中选择另一个类型，然后它显示与该选择对应的div，但在所有选项卡中，它在不同的标签中没有区别，即使类型不同。

Answer 1

您的代码所有<div class="container">不仅仅是与EditorTemplate相关联的代码。更改顶级div以赋予其类名

<div class="maincontainer"> // change this
  //Hidden fields here
  .....
  </div>
  <div  class="col-md-5">
    <div class="container">
      <div class="EmailDiv">         
      </div>
      <div class="CalendarDiv">          
      </div>
    </div>
  </div>
</div>

然后调整脚本

$(".EmailDiv").hide();
$(".CalendarDiv").hide();
// Set initial visibility
$('.TypeSelector').each(function (index, item) {
    var container = $(this).closest('.maincontainer').find('.container'); // change this
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
    }
});

// Update visibility on selection
$('.TypeSelector').change(function () {
    var container = $(this).closest('.maincontainer').find('.container'); // change this
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
        container.find('.EmailDiv').hide();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
        container.find('.CalendarDiv').hide();
    }
});

在下拉列表中显示/隐藏div基于selectedItem - 内部tablist

1 个答案: