Jquery 根据填写的表单字段显示div

我有一个脚本，我使用一个滑块来显示表单的一些元素。到现在为止，一直都还不错。我这样做的方式是通过一个滑块（不能使用多步骤表单，因为它使用了一个不允许多步骤表单的插件，加上一些图形行为）和一个指向下一个滑块的按钮。所以现在我需要那个按钮（不是表单的一部分）只在某个字段被填充时显示

我尝试了以下内容，但不起作用，我假设有一些错误，但不知道是什么。我的代码如下：

$('#clientname').change(function() {
    var clientVal = $("input").val() == '';
$(".next").hide();

if ($('#clientname').val() != '').show();

else

$('.next').hide();
});

<div class="b40-right">


                        <h3>The Basics</h3>
                        <div class="label"> Your Name (required)</div>
                        <div class="inputes"> <span class="wpcf7-form-control-wrap your-name"><input id="clientname" type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </div>
                        <div class="label">Your Email (required)</div>
                        <div class="inputes">    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </div>
                        <div class="label">Type of Business</div>
                        <div class="inputes">    <span class="wpcf7-form-control-wrap type-of-business"><textarea name="type-of-business" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea></span> </div>



                    </div>

                    <a class="next" href="javascript:stepcarousel.stepBy('mygallery2', 1)"><img id="nextbut1" src="<?php bloginfo('template_directory'); ?>/images/next.png" alt="" /></a>

和html格式如下：

$('#clientname').change(function() {
    var clientVal = $("input").val() == '';
$(".next").hide();

if ($('#clientname').val() != '').show();

else

$('.next').hide();
});

<div class="b40-right">


                        <h3>The Basics</h3>
                        <div class="label"> Your Name (required)</div>
                        <div class="inputes"> <span class="wpcf7-form-control-wrap your-name"><input id="clientname" type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /></span> </div>
                        <div class="label">Your Email (required)</div>
                        <div class="inputes">    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /></span> </div>
                        <div class="label">Type of Business</div>
                        <div class="inputes">    <span class="wpcf7-form-control-wrap type-of-business"><textarea name="type-of-business" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea></span> </div>



                    </div>

                    <a class="next" href="javascript:stepcarousel.stepBy('mygallery2', 1)"><img id="nextbut1" src="<?php bloginfo('template_directory'); ?>/images/next.png" alt="" /></a>

基础知识
您的姓名（必填）
您的电子邮件（必填）
业务类型

我做错了什么有什么帮助吗？是否有更好的方法/解决方案？（我不是你想象中的程序员）

---

提前谢谢你

如果我理解你的意思是正确的，我相信这就是你想要实现的目标：

$(function () {    
    $('#clientname').change(function() {
       if ($(this).val().length === 0)
          $('.next').hide();
       else
          $('.next').show();
    });
});

每当ID为clientname的输入值更改时，我们都会检查该值的长度（输入中输入的字符数）。如果长度为零，则隐藏按钮，否则显示按钮

我还将其包装在一个DOM就绪回调中，以确保在知道元素存在于DOM中之前，不会尝试添加更改事件侦听器

编辑：

上面的示例也可以写得更短，如下所示：

$(function () {    
    $('#clientname').change(function() {
        $('.next').toggle($(this).val().length !== 0);
    });
});​

演示：

一把小提琴来演示代码：

如果所有必填字段都已填写，我想您希望显示“下一步”按钮

因此，首先必须隐藏“下一步”按钮

然后，检查必填字段的更改，如果所有必填字段都已填充，则将变量设置为true。如果该变量为真，则显示“下一步”按钮

$("input.wpcf7-validates-as-required").change(function() {
    checkIfAllFieldsAreFilled();
});

function checkIfAllFieldsAreFilled(){
    var fieldsAreFilled = true;

    $("input.wpcf7-validates-as-required").each(function(){
        fieldsAreFilled &= ($(this).val() != '');
    });

    if(fieldsAreFilled){
        $('.next').show();
    }
}

---

Christofer，谢谢你的回答，但是div仍然默认显示，我应该使用display:none还是其他什么？我试过了，但也没用，也许我遗漏了什么？@Fabio是的，或者你使用CSS

display:none将按钮设置为默认隐藏如您所建议，或者您调用
$（'.next'）.hide（）在DOM就绪回调中执行的第一件事。我马上就把一个例子放在小提琴上。@Fabio是的，很抱歉。我忘了toggle也可以使用数字作为初始参数，因此我的第一个代码不起作用。谢谢1.44mb，但是Christofer的答案是准确的，因为其他div没有使用必填字段是的，我需要相同的行为。无论如何，谢谢你，我相信你的答案对其他人可能很有价值：）我看到有两个字段（姓名和电子邮件）使用required属性，而不是像你所说的那样只有一个。