基于 keyup 事件使用 jquery 在 CSS 样式插入之间切换答案

【问题标题】：Toggle between CSS style insertion using jquery based on keyup event基于 keyup 事件使用 jquery 在 CSS 样式插入之间切换
【发布时间】：2017-01-13 18:45:50
【问题描述】：

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

如果文本字段不为空，那么我将 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;
    }
});

【问题讨论】：

向我们展示您的 html
您调用CheckInputs()，但您显示的函数称为Checkmultiple。
@Utkanos-编辑了我的问题
请添加更多信息，从您的帖子中不清楚什么是captionurl 和captionfile。请添加您的 html 文件以获得更多许可
@NARGISPARWEEN-添加的 html

标签： javascript jquery html css

【解决方案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

【讨论】：

@Arun Redhu-反正那个小提琴有我需要的东西。:-)

【解决方案2】：

jQuery .css() 函数只是添加新的 css 条目，这些条目的优先级高于 css 文件中的条目。如果您不想创建两个类.basic 和.modified，可以使用以下方法将css 属性重置为默认值：

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

此代码检查您的文本字段是否为空。它应该放在文本字段的keyup功能中。使用 jQuery 将任何 css 属性设置为空 ("")，默认由 jQuery 所做的任何修改。

【讨论】：