2

我试图隐藏下一个按钮div，直到其中的输入被填充，所以我添加了以下代码：

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

这是我的Div

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

如果隐藏下一个按钮div但是当我填充输入时#myDiv没有#next_btn显示出来。

我在这里做错了吗？

4

6 回答 6

4

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

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

$(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
});

更改事件可以吗？

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

于 2013-01-08T14:11:01.313 回答
3

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

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

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

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

更新以删除额外的 jquery 选择

于 2013-01-08T14:08:55.537 回答
1

这就是它可以在短时间内完成的方法。

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);
    });
});

演示：http: //jsfiddle.net/LYtbJ/

于 2013-01-08T14:15:39.037 回答
1

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

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

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

或者您可以进一步简化它并!$('#myDiv > input').val()代替$('#myDiv > input').val().length == 0.

于 2013-01-08T14:08:50.623 回答
1

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

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

这行得通吗？

于 2013-01-08T14:10:04.453 回答
1

我认为您将 DIV ( #myDiv) 与输入按钮混淆了：

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

在这里，我假设您的输入有一个类 'my-input-class' 并使用 find() 来抓取它。另外，我假设您有一个事件来监听用户在您的输入框中输入的内容。干杯。

于 2013-01-08T14:11:14.720 回答