javascript - 使用基于 keyup 事件的 jquery 在 CSS 样式插入之间切换

Question

我有一个文本字段和一个 anchor 标记字段。

如果文本字段不为空，那么我将 CSS 属性添加到 anchor 标记。

如果文本字段为空，我需要恢复到以前的样式。

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