CSS類互相沖突

我有一個input字段和一個button。在點擊button時，將檢查input字段是否有一些數據。如果沒有數據，則input字段將突出顯示。關注input字段，將顯示錯誤消息。在keyup事件中，input將不再突出顯示，但錯誤消息將保留。CSS類互相沖突

下面是我曾嘗試代碼：

$(document).ready(function(){ 
 
     $('#btnclick').click(function(){ 
 
    \t  if($('[name="tName"]').val() == "") 
 
     { 
 
    \t  $('[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類（經過大量分析後發現的），但我不知道爲什麼會發生這種情況。我做錯了什麼？任何幫助將不勝感激。謝謝！

來源

2016-11-24 Senjuti Mahapatra

http://www.bootply.com/2aillUhFwH – Banzay

@Banzay：這是不是期望的輸出 –

喜添加下面的代碼的按鈕單擊事件中，

$('[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(){ 
 
    \t  if($('[name="tName"]').val() == "") 
 
     { 
 
    \t  $('[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">

來源

2016-11-24 11:22:51 SilentCoder

不，它不起作用。在'focus'事件中，應該顯示錯誤消息，而不是在'keyup'事件被觸發後顯示。 –

檢查編輯好的代碼..你也應該改變''。 – SilentCoder

在我的代碼片段中，當它突出顯示時，可以看到文本框頂部有一個小三角形，這就是爲什麼我使用'span'而不是'div'。在你的片段中，三角形缺失。 –

我希望這可以幫助您。我只是做了做一個功能添加和刪除CSS類和顯示或不消息：

jQuery.fn.myValidate = function(){ 
 
    if(this.val() == ""){ 
 
    this.next("span.vspan").html("Please enter Name"); 
 
    this.next("span.vspan").css("display", "inline-block"); 
 
    this.addClass('validationInput'); 
 
    this.closest('div').addClass('wrap'); 
 
    return false; 
 
    }else{ 
 
    this.next("span.vspan").css("display", "none"); 
 
    this.closest('div').removeClass("wrap"); 
 
    this.removeClass('validationInput'); 
 
    this.next("span.vspan").css("display", "none"); 
 
    return true; 
 
    } 
 
} 
 

 
$(document).ready(function(){ 
 
    $('#btnclick').click(function(){ 
 
    if ($('[name="tName"]').myValidate()) 
 
     alert('Success'); 
 
    }); 
 
    
 
    $('[name="tName"]').on('focusout keyup', function (evt) { 
 
    $(this).myValidate(); 
 
    }); 
 

 
});

.validationInput, 
 
    .validationInput{ 
 
     background-color: #FFFFE0; 
 
     border: 1px solid red; 
 
     outline: none; 
 
     height: 30px 
 
    } 
 

 
    .wrap>span { 
 
     display: inline-block; 
 
     position: relative; 
 
     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">

來源

2016-11-24 12:38:30

我刪除溢出：從CSS隱藏，對我沒有意義如果目標是要顯示它們。我通過在Jquery中進行焦點調整來改變CSS中的懸停validationInput。 –

它仍然不是所需的輸出。 –

CSS類互相沖突

回答

相關問題