javascript - CSS类相互冲突

Question

我有一个输入字段和一个按钮。单击按钮时，将检查input 字段是否有一些数据。如果没有数据，则 input 字段将突出显示。将焦点放在 input 字段上，将显示错误消息。在 keyup 事件中，input 将不再突出显示，但错误消息将保留。

下面是我试过的代码:

$(document).ready(function(){
      $('#btnclick').click(function(){
  	    if($('[name="tName"]').val() == "")
        {
    	    $('[name="tName"]').addClass('validationInput');
            $('[name="tName"]').closest('div').addClass('wrap');
        }
        else
          alert('Success');
      });
  
      $('[name="tName"]').on('focus', function () {
        if ($(this).hasClass('validationInput')) {
            $(this).next("span.vspan").html("Please enter Name");
            $(this).next("span.vspan").css("display", "inline-block"); 
        }
        });
  
       $('[name="tName"]').on('keyup', function () {
        $(this).removeClass("validationInput");
        $(this).closest('div').removeClass("wrap");
        });
    });

.validationInput,
    .validationInput:focus,
    .validationInput:hover {
        background-color: #FFFFE0!important;
        border: 1px solid red!important;
        height: 30px
    }

    .wrap>span {
        display: inline-block;
        position: relative;
        overflow: hidden;
        width: 100%
    }

    .wrap>span:after {
        content: '';
        position: absolute;
        top: -5px;
        right: -5px;
        width: 0;
        height: 0;
        border-width: 5px;
        border-color: red;
        border-style: solid;
        transform: rotate(45deg);
        box-shadow: 0 0 0 1px #FFFFE0
    }

    input[type=text].vtooltips {
      position: relative;
      display: inline;
    }
    input[type=text].vtooltips + span.vspan {
      position: absolute;
      display:none;
      font-size:12px; 
      font-family: Arial; 
      color:white;
      border-radius:3px; 
      background: #DC000C;
      width:50%;
      border: 1px solid #6D6D6D;
      line-height: 0px;
      text-align: center;
      border-radius: 4px;
      box-shadow: 2px 2px 0px #AFB1B1;
      margin-left:5px;
      line-height:15px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-lg-3">
      <span>
        <input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
        <span class="vspan"></span> 
      </span>
    </div>
    <br><br>
    <input id="btnclick" value="Click" type="button">

这是一个Demo相同。

但是，CSS 在某种程度上存在冲突。错误消息应显示在 focus 事件上，但在触发 keyup 事件后显示。发生这种情况是因为 wrap 类(经过大量分析后发现)，但我不知道为什么会发生这种情况。我做错了什么？任何帮助都感激不尽。谢谢!

Answer 1

您好，在您的按钮点击事件中添加以下代码，

$('[name="tName"]').focus();

同时更改<span>标记为 <div>代码片段中的标签。

然后整个代码如下所示，

$('#btnclick').click(function(){
        if($('[name="tName"]').val() == "")
        {
            $('[name="tName"]').addClass('validationInput');
            $('[name="tName"]').closest('div').addClass('wrap');
            $('[name="tName"]').focus()
        }
        else
          alert('Success');
      });

代码片段，

$(document).ready(function(){
      $('#btnclick').click(function(){
  	    if($('[name="tName"]').val() == "")
        {
    	    $('[name="tName"]').addClass('validationInput');
            $('[name="tName"]').closest('div').addClass('wrap');
            $('[name="tName"]').focus();
        }
        else
          alert('Success');
      });
  
      $('[name="tName"]').on('focus', function () {
        if ($(this).hasClass('validationInput')) {
           $(this).next("span.vspan").css("display", "inline-block").html("Please enter Name");
           
        }
        });
  
       $('[name="tName"]').on('keyup', function () {
        $(this).removeClass("validationInput");
        $(this).closest('div').removeClass("wrap");
        });
    });

.validationInput,
    .validationInput:focus,
    .validationInput:hover {
        background-color: #FFFFE0!important;
        border: 1px solid red!important;
        height: 30px
    }

    .wrap>span:first {
        display: inline-block;
        position: relative;
        overflow: hidden;
        width: 100%
    }

    .wrap>span:after {
        content: '';
        position: absolute;
        top: -5px;
        right: -5px;
        width: 0;
        height: 0;
        border-width: 5px;
        border-color: red;
        border-style: solid;
        transform: rotate(45deg);
        box-shadow: 0 0 0 1px #FFFFE0
    }

    input[type=text].vtooltips {
      position: relative;
      display: inline;
    }
    input[type=text].vtooltips + span.vspan {
      position: absolute;
      display:none;
      font-size:12px; 
      font-family: Arial; 
      color:white;
      border-radius:3px; 
      background: #DC000C;
      width:50%;
      border: 1px solid #6D6D6D;
      line-height: 0px;
      text-align: center;
      border-radius: 4px;
      box-shadow: 2px 2px 0px #AFB1B1;
      margin-left:5px;
      line-height:15px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-lg-3">
    
      <span class="caret">
       
        <input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
        <span class="vspan"></span> 
       
      </span>
      
    </div>
    <br><br>
    <input id="btnclick" value="Click" type="button">