闪烁文本如果复选框被选中为真

Posted 2023-04-13

【中文标题】闪烁文本如果复选框被选中为真

【英文标题】：Blinking Text If checkbox is checked to true

【发布时间】：2021-04-26 16:39:10

【问题描述】：

我正在尝试创建当用户在索引页面紧急列中选中复选框到 yes(true) 时需要闪烁文本，例如紧急 但不幸的是，我尝试了几种方法但没有成功。 到目前为止，这是我所做的

@if (Model.Count() > 0)
    
        <table class="table table-bordered table-striped" style="width:100%">
            <thead>
                <tr>
                    <th>
                        Doctor Full Name - CODE
                    </th>

                    <th>
                        Patient Full Name
                    </th>
                    <th>
                        Date and Time
                    </th>
                    <th>
                        Emergency
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var obj in Model)
                
                    <tr>
                        <td >@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td >@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td >@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        
                            <span class="blink_me">Emergency</span>
                        


                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                
            </tbody>
        </table>
    
    else
    
        <p> No Admission Patient exists.</p>
    


@section Scripts
    <script>
        (function blink() 
            $('.blink_me').fadeOut(500).fadeIn(500, blink);
        )();
    </script>

我在这里发布图片以查看发生了什么以及我正在寻找的示例

DEMO

知道我做错了什么吗？

【问题讨论】：

闪烁文本并不是最容易访问的东西。根据您的用户群，您可能会遇到问题。

你为什么这么认为？

查看Web Accessibility Initiative

嗯，不知道你在说什么

检查What is the replacement for a blinking text in a web page?

【参考方案1】：

使用这个 CSS：

.elementToFadeInAndOut 
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;


@-webkit-keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 


@keyframes fadeinout 
  0%,100%  opacity: 0; 
  50%  opacity: 1; 

和html：

<tbody>
                @foreach (var obj in Model)
                
                    string fadinOutClass = "";
                    <tr>
                        <td >@obj.Doctor.Firstname @obj.Doctor.Lastname @obj.Doctor.Code</td>
                        <td >@obj.Patient.FirstName @obj.Patient.LastName</td>
                        <td >@obj.DateAndTime</td>
                        @if(obj.Emergency == true)
                        
                            fadinOutClass="elementToFadeInAndOut";
                        


                        <td class="text-center">
                            <div class="w-75 btn-group" role="group">
                                <a asp-route-Id="@obj.Id" asp-action="Upsert" class="btn btn-primary mx-2 @fadinOutClass">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a asp-route-Id="@obj.Id" asp-action="Delete" class="btn btn-danger mx-2 @fadinOutClass">
                                    <i class="far fa-trash-alt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                
            </tbody>

您希望 Flash 做什么？根据我给你的代码，按钮会闪烁