javascript - 根据 razor 属性值选择要显示的 img

Question

我的 cshtml 页面上有 2 个图标(“New”和“Preleased”)，其属性为“hidden”。我想根据我返回的 Razor 模型的属性值显示其中之一。

我的脚本是:

 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>

Answer 1

您可以使用 .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>

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