选择要基于剃刀属性值显示的 img

本文关键字：属性 显示 img 剃刀 于剃刀 选择 | 更新日期: 2023-09-27 17:56:48

我有 2 个图标（"新"和"已发布"），在我的 cshtml 页面上具有"隐藏"的属性。 我想根据我返回的剃须刀模型的属性值显示一个或另一个。

我的脚本是：

 function ItemConditionSelector() {
     if (@Model.InventoryExchangeItem.ReplacementItemCondition == "New") {
         document.getElementById("NewIcon").hidden = false;
     } else {
         document.getElementById("UsedIcon").hidden = false;
     }
 }

和我的代码块：

<td on="ItemConditionSelector()">
    @Model.InventoryExchangeItem.ReplacementProduct
    <br /> @Model.InventoryExchangeItem.ReplacementItemNumber | @Model.InventoryExchangeItem.ReplacementProductSku |
    <img id="NewIcon" hidden src='~/Images/ico_NewMerchandise.png' />
    <img id="UsedIcon" hidden src='~/Images/ico_prelease.png' /> @Model.InventoryExchangeItem.ReplacementItemCondition
</td>

选择要基于剃刀属性值显示的 img

您可以使用.hide { display: none; } 的 css 类。然后你会这样做：

<td on="ItemConditionSelector()">
    @Model.InventoryExchangeItem.ReplacementProduct <br />
    @Model.InventoryExchangeItem.ReplacementItemNumber | @Model.InventoryExchangeItem.ReplacementProductSku | 
    @{
        var hideNew = @Model.InventoryExchangeItem.ReplacementItemCondition == "New" ? "hide" : "";
        var hideUsed = hideNew == "hide" ? "" : "hide";
    }
    <img id="NewIcon" class="@hideNew" src='~/Images/ico_NewMerchandise.png' />
    <img id="UsedIcon" class="@hideUsed" src='~/Images/ico_prelease.png' />
    @Model.InventoryExchangeItem.ReplacementItemCondition
</td>

像这样验证两者需要一些额外的工作，但它有效。

您也可以像这样隐藏服务器端的元素... 

if (@Model.InventoryExchangeItem.ReplacementItemCondition == "New") {
    <img id="NewIcon" class="@hideNew" src='~/Images/ico_NewMerchandise.png' />
}
else {
    <img id="UsedIcon" class="@hideUsed" src='~/Images/ico_prelease.png' />
}
相关文章：