Show/Hide BeginCollectionItem 的逻辑
Show/Hide Logic with BeginCollectionItem
我正在使用 BeginCollectionItem,我正在尝试弄清楚如何获取每个 individual collection 值来执行条件 show/hide 逻辑。例如,如果我有以下剃须刀标记:
<div class="collection">
@using (Html.BeginCollectionItem(nameof(Item)))
{
<select class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b">b is selected</div>
}
</div>
如果 "b" 元素被 select 编辑,我需要显示 "show-if-b" div,否则它需要隐藏。这个逻辑需要 运行 onchange of the select and when the page loads ("b" could be saved) 所以我并不总是有一个要附加到的事件。
我用 jQuery .closest()、.find() 和 .parents() 尝试了不同的方法,但我似乎无法得到具体的 select 每个 collection.
中的值
非常感谢任何帮助。
将 "collapsed" class 添加到 div 并尝试使用下面的 css 和 javascript 代码(这将隐藏和取消隐藏 div 基于所选值):
HTML:
<div class="show-if-b collapsed">b is selected</div>
CSS:
.collapsed{
display : none;
}
Javascript:
$(document).on("change","#select-id",function(){
if($(this).val() == "b"){
$(".show-if-b").removeClass("collapsed");
}
else{
$(".show-if-b").addClass("collapsed");
}
});
如果您希望在页面加载时选择选项 "b",请使用下面的代码
$(document).ready(function(){
$("#select-id").val("b");
$(".show-if-b").removeClass("collapsed");
});
您可以在 on("change")
中使用 $(this).next()
到 select 每个 div 元素 "b is selected"
。我将这些元素样式显示 none 设置为默认值,但您可以根据您的模型初始值更改此 css 属性。您可以像下面这样实现。
$(".collection .select-class").on("change", function(){
var val = $(this).val();
if(val == "a")
{
$(this).next().hide();
}
else
{
$(this).next().show();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">
<table>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
</table>
</div>
虽然上面@user8175473 的回答可行,但我发现我还可以使用 jQuery 的 .each() 和 .find() 函数来遍历每个集合:
$(".collection").each(function (index)
{
if ($(this).find("#select-id").val() === "b")
{
$(this).find(".show-if-b").show();
}
else
{
$(this).find(".show-if-b").hide();
}
});
我正在使用 BeginCollectionItem,我正在尝试弄清楚如何获取每个 individual collection 值来执行条件 show/hide 逻辑。例如,如果我有以下剃须刀标记:
<div class="collection">
@using (Html.BeginCollectionItem(nameof(Item)))
{
<select class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b">b is selected</div>
}
</div>
如果 "b" 元素被 select 编辑,我需要显示 "show-if-b" div,否则它需要隐藏。这个逻辑需要 运行 onchange of the select and when the page loads ("b" could be saved) 所以我并不总是有一个要附加到的事件。
我用 jQuery .closest()、.find() 和 .parents() 尝试了不同的方法,但我似乎无法得到具体的 select 每个 collection.
中的值非常感谢任何帮助。
将 "collapsed" class 添加到 div 并尝试使用下面的 css 和 javascript 代码(这将隐藏和取消隐藏 div 基于所选值): HTML:
<div class="show-if-b collapsed">b is selected</div>
CSS:
.collapsed{
display : none;
}
Javascript:
$(document).on("change","#select-id",function(){
if($(this).val() == "b"){
$(".show-if-b").removeClass("collapsed");
}
else{
$(".show-if-b").addClass("collapsed");
}
});
如果您希望在页面加载时选择选项 "b",请使用下面的代码
$(document).ready(function(){
$("#select-id").val("b");
$(".show-if-b").removeClass("collapsed");
});
您可以在 on("change")
中使用 $(this).next()
到 select 每个 div 元素 "b is selected"
。我将这些元素样式显示 none 设置为默认值,但您可以根据您的模型初始值更改此 css 属性。您可以像下面这样实现。
$(".collection .select-class").on("change", function(){
var val = $(this).val();
if(val == "a")
{
$(this).next().hide();
}
else
{
$(this).next().show();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">
<table>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
<tr>
<select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
<option value="a">a</option>
<option value="b">b</option>
</select>
<div class="show-if-b" style="display:none">b is selected</div>
</tr>
</table>
</div>
虽然上面@user8175473 的回答可行,但我发现我还可以使用 jQuery 的 .each() 和 .find() 函数来遍历每个集合:
$(".collection").each(function (index)
{
if ($(this).find("#select-id").val() === "b")
{
$(this).find(".show-if-b").show();
}
else
{
$(this).find(".show-if-b").hide();
}
});