根据引导形式中的条件使文本变灰

Posted 2023-03-22

【中文标题】根据引导形式中的条件使文本变灰

【英文标题】：Making text greyed out based on condition in a bootstrap form

【发布时间】：2021-12-11 04:47:41

【问题描述】：

因此，我的任务是为电影院 Web 应用程序制作租赁历史项目的索引页面。其中一项要求是，如果租赁没有损坏，我将损坏的文本显示为灰色，如果损坏，则将损坏的文本设置为默认黑色。我尝试过使用 if/else 语句，但我不确定如何真正定位文本。

到目前为止，这是我的索引页面：

@model IEnumerable<TheatreCMS3.Areas.Rent.Models.RentalHistory>

@
    ViewBag.Title = "Index";





<h2 class="Rental_History-Index-Header">Index</h2>

<p>
    @html.ActionLink("Create New", "Create")
</p>

<table id="Rental_History-Index-Table" class="table">
  <tr>
    <th>
      Most Recent Rental Histories
    </th>
  </tr>

  @foreach (var item in Model)
  
    
    <tr id="Rental_History-Index--hover-row">
      <td id="Rental_History-Index--BoolIcon" class="col-xs-1" style="width: 0px;">
        @if (item.RentalDamaged == true)
        
          <i id="Rental_History-Index--crossmarkclass" class="fas fa-times-circle fa-lg"></i>
          
        
        else
        
          <i id="Rental_History-Index--checkmarkclass" class="fa fa-check-circle fa-lg" aria-hidden="true"></i>

        
      </td>


      <td class="col">
        <button type="button" class="btn btn-dark">@Html.DisplayFor(modelItem => item.Rental)</button>
      </td>


      
      <td id="Rental_History-Index-DI_Text" class="text-muted">
          @Html.DisplayFor(modelItem => item.DamagesIncurred)
      </td>


      <td id="Rental_History-Index-Vertical_Ellipse">
        
          <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
          </button>

          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li> <a class="dropdown-item" href="@Url.Action("Edit", new  id = item.Id )"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
            <li> <a class="dropdown-item" href="@Url.Action("Details", new  id = item.Id )"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
            <li><div class="dropdown-divider"></div></li>
            <li> <a class="dropdown-item" href="@Url.Action("Delete", new  id = item.Id )"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
          </ul>
      </td>
     </tr>
    
  

</table>

【参考方案1】：

让你的 css 文件有一个黑色的 blackcss 和一个灰色的 graycss。现在您可以在 td 上添加一个条件类，如下所示：

 <td id="Rental_History-Index-DI_Text" class="text-muted @(item.RentalDamaged == true ? "blackcss" : "greycss")">
          @Html.DisplayFor(modelItem => item.DamagesIncurred)
      </td>

【讨论】：

非常感谢您的反馈！我实际上最终使用了一个似乎有效的 if/else！

【参考方案2】：

所以我最终在我的索引页面中使用了一个似乎有效的 if/else 语句。如果有人遇到类似问题，这是我的代码：

@if (item.RentalDamaged == true)
  
    <td id="Rental_History-Index-DI_Text" class="">
      @Html.DisplayFor(modelItem => item.DamagesIncurred)

      <span id="Rental_History-Index-Vertical_Ellipse">

        <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li> <a class="dropdown-item" href="@Url.Action("Edit", new  id = item.Id )"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
          <li> <a class="dropdown-item" href="@Url.Action("Details", new  id = item.Id )"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
          <li><div class="dropdown-divider"></div></li>
          <li> <a class="dropdown-item" href="@Url.Action("Delete", new  id = item.Id )"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
        </ul>
      </span>
    </td>
  
  else
  
    <td id="Rental_History-Index-DI_Text" class="text-muted">
      @Html.DisplayFor(modelItem => item.DamagesIncurred)

      <span id="Rental_History-Index-Vertical_Ellipse">

        <button class="btn btn-dark" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li> <a class="dropdown-item" href="@Url.Action("Edit", new  id = item.Id )"><i style="padding-right: 5px;" class="fa fa-edit" aria-hidden="true"></i>Edit </a></li>
          <li> <a class="dropdown-item" href="@Url.Action("Details", new  id = item.Id )"> <i style="padding-right: 5px;" class="fa fa-info" aria-hidden="true"></i>Details </a></li>
          <li><div class="dropdown-divider"></div></li>
          <li> <a class="dropdown-item" href="@Url.Action("Delete", new  id = item.Id )"><span style="color: red;"><i style="padding-right: 5px;" class="fa fa-trash" aria-hidden="true"></i>Delete</span> </a></li>
        </ul>
      </span>
    </td>
  

</tr>