Question

我正在创建一个按钮，前提是输入字段中有内容，工作正常。但是，如果我删除所有内容，因为我不确定如何在某种切换上反转该过程。这就是我现在所处的位置：

$(document).ready(function(){
    $("#issueField").keydown(function(){
        $("#issueTick").css("opacity", "1");
    });    
});

我的问题是，有没有办法切换这个，以便如果输入为空，不透明度将被设置回0？

Answer 1

您可以使用+!!$(this).val()作为CSS不透明度值。这将是0或1，具体取决于输入中是否有文本内容。

我还建议听取input事件而不是keyup事件，因为第一个事件也会触发更改输入的其他方式（鼠标，上下文菜单......）：

＆＃13;

$(document).ready(function(){
    $("#issueField").on("input", function(){
        $("#issueTick").css("opacity", +!!$(this).val());
        
    }).trigger("input");    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="issueField">
<div id="issueTick" style="background: yellow">issue tick</div>

＆＃13;

Answer 2

虽然我认为有更好的方法来实现这一点，但我不知道你为什么使用不透明度而不是display none / block。这对你有用：

$(document).ready(function(){
    $("#issueField").keyup(function(){
            if($("#issueField").val()) {
            $("#issueTick").css("opacity", "1");
        } else { 
             $("#issueTick").css("opacity", "0");
        }
    });    
});

请注意，我使用的是keyup，因为我们需要在值更改后拦截键。

Answer 3

试试这个

    $(document).ready(function()
    {
      $("#issueField").keydown(function()
      {
         if($('#issueField').val() == "") 
           {
               $("#issueTick").css("opacity", "1");
           }
        else
          {
               $("#issueTick").css("opacity", "0.1");
          }
     })
   });

Answer 4

你必须设置一个模糊事件来检查textbox的值是否为空，这样在模糊之后它会将不透明度返回到0

$(document).ready(function(){
    $("#issueField").keydown(function(){
        $("#issueTick").css("opacity", "1");
    });    
$("#issueField").blur(function(){
if($("#issueField").val()==''){
        $("#issueTick").css("opacity", "0");
}
    });  
});

如果输入字段为空，如何删除css

4 个答案: