キーアップイベントに基づくjqueryを使用したCSSスタイル挿入の切り替え

Question

テキストフィールドとアンカータグフィールドがあります。

テキストフィールドが空でない場合は、CSS属性をアンカータグに追加します。

テキストフィールドが空の場合は、以前のスタイルに戻す必要があります。

HTML

<div class="col-md-3"> 
    <div class="form-group"> 
     <i class="fa fa-fw fa-cloud-upload"></i> 
     <label for="">File upload</label> 
     <?php if ($announcements_details['file']!='') { ?> 
     <a id="anchor" href='<?php echo base_url(); ?>/documents/<?php echo $announcements_details['file'] ; ?>' target="_blank" style="text-decoration:none"> 
      <?php echo $announcements_details['file'] ; ?> 
     </a> 

     <a class="btn btn-danger btn-xs">Delete</a> 
     <input type="file" id="captionfile" name="captionfile" value="<?php echo $announcements_details['file'] ; ?>"> 
     <?php } else { ?> 
      <input type="file" id="captionfile" name="captionfile" value=""> 
     <?php } ?> 
    </div> 
</div> 

はJavaScript

$("#captionurl").keyup(function() { 
    $("#captionfile").attr("disabled", CheckInputs()); 
    $('#anchor').css({ 
     'pointer-events': 'none', 
     'cursor': 'default', 
     'color': '#91969e' 
    }); 

    function Checkmultiple() { 
     var value = $.trim($("#url1").val()); 
     if (value.length != 0) { 
      valid = true; 
     } else { 
      valid = false; 
     } 
     return valid; 
    } 
}); 

Answer 1

HTMLテンプレート

<div class="parent"> 
    <input type="text" id="mytextfield" class="basic"/> 
    <a href="#" onclick="doAction()" /> 
</div> 

Javascriptのコード

$(document).ready(function() { 
    var inputElem = $('#mytextfield'); 
    inputElem.keyup(function() { 
     var input= $(this); 
     if(input.val()){ 
     input.addClass('modified'); 
     input.removeClass('basic'); 
     }else{ 
     input.addClass('basic'); 
     input.removeClass('modified'); 
     } 
    }); 
}); 

CSSコード

input{ 
    outline:none; 
} 
.basic{ 
    border:2px solid #d2d2d2; 
} 
.modified{ 
    border:2px solid green; 
} 

Check jsfiddle here

Answer 2

jQueryの.css()機能は、単に新しいCSSがそれらがCSSファイルでのものよりも高い優先順位を持つエントリが追加されます。あなたは二つのクラス.basicと.modifiedを作成したくない場合は、使用してデフォルトにCSSプロパティをリセットすることができます。

if($('#your_text_field').val() == ""){ 
 
    $('#anchor').css({'pointer-events': '', 'cursor': '', 'color': '' }); 
 
}

このコードをチェックし、あなたのテキストフィールドが空の場合。テキストフィールドのキーアップ機能に入れる必要があります。任意のcssプロパティをjQueryで空（ ""）に設定すると、jQueryによって行われたすべての変更がデフォルトになります。