JQuery条件如果其他的错误

Question

我正在尝试隐藏下一个按钮div，直到其中的输入被填充，因此我添加了此代码：

<script>
    $(document).ready(function () {
        if ($('#myDiv').val().length == 0) {
            $('#next_btn').hide();  
        } else {    
            $('#next_btn').show();      
        }
    });
</script>

这是myDiv

<textarea id="myDiv"></textarea>

如果隐藏了下一个按钮div，但当我填充#myDiv中的输入时，#next_btn未显示。

我在这里做错了吗？

Answer 1

将更改事件处理程序附加到您的输入

您最初只是隐藏了下一个元素。您还应该重新检查输入值的每次更改。试试这个：

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        this.value.length && $('#next_btn').show() || $('#next_btn').hide();
    }).change(); // set initial state
});

我没有使用if语句，因为你在每种情况下都做了简单的一句话。我宁愿用布尔表达式替换它。 Javascript引擎的布尔执行将确保只执行一个jQuery选择器，因此也不需要缓存下一个按钮元素。

你当然可以用if代替那个单行代码：

if (this.value.length)
{
    $('#next_btn').show();
}
else
{
    $('#next_btn').hide();
}

不要忘记初始化状态

附加更改事件并非一切。当页面加载（或准备好）时，您还需要设置初始状态。我的代码是在最后一次调用.change()时执行的。这意味着它首先注册处理程序，然后再调用它。

超简化解决方案：使用toggle和布尔参数

整个事情可以由此取代：

$(function(){
    // bind a change event handler
    $('#myDiv').change(function(){
        $('#next_btn').toggle(!!this.value.length);
    }).change(); // set initial state
});

更改事件是否正常？

可能不是变更事件满足您的要求，因为它会在字段失去焦点后触发。也许您应该使用keypress或keyup事件。但解决方案保持原样。只需替换事件处理程序绑定。

Answer 2

我假设#myDiv是输入标签？或者div里面有输入？试试这个：

 var textarea = $("#myDiv");
 textarea.change(function(){
      if(this.value.length == 0)
           textarea.hide();
      else
           textarea.show();
 });

当输入更改时，将运行if。每次进行更改时重新运行代码非常重要，因为长度在变化！

（注意，给myDiv一个更好的名字可能是明智的，因为它不是真正的div而是textarea。）

更新以删除额外的jquery选择

Answer 3

假设输入直接在myDiv内，我认为你的意思是：

if ($('#myDiv > input').val().length == 0) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

您正在尝试检查输入的值而不是div（就我所知，这是不可能的。）

或者您可以对其进行简化，并!$('#myDiv > input').val()代替$('#myDiv > input').val().length == 0。

Answer 4

你是否将这段代码放在onchange函数中？

$(document).ready(function() {
    $('#myDiv').change(function() {
        if(this.value.length == 0) {
            $('#next_btn').hide();
        } else {
            $('#next_btn').show();
        }
    });
});

这有用吗？

Answer 5

我认为您的DIV（#myDiv）与输入按钮相混淆：

if( $('#myDiv').find('.my-input-class').val().length == 0 ) {
    $('#next_btn').hide();
} else {
    $('#next_btn').show();
}

在这里，我假设您的输入有一个类'my-input-class'并使用find（）来获取它。此外，我假设您有一个事件来监听用户在输入框中输入内容。欢呼声。

Answer 6

这就是如何做到这一点。

HTML：

<div id="myDiv">
  <input value="Test" />
</div>
<button id="next_btn">Next</button>

JavaScript的：

$(function() {
    $("#myDiv input").on("keyup", function() {
        $("#next_btn").toggle($.trim(this.value).length > 0);
    });
});

DEMO： http://jsfiddle.net/LYtbJ/