Question

请帮我处理我的代码。我试图隐藏一些字段，直到填写所有其他字段。

这是我的代码：

HTML

<div id="group1">

        <label>Field 1:</label>
        <input type="text" class="field1"/><br/>
        <label>Field 2:</label>
        <input type="text" class="field2"/><br/>
        <label>Field 3:</label>
        <input type="text" class="field3"/><br/>

</div>

<div id="group2">

       <label>Field 4:</label>
       <input type="text" class="field4"/>

</div>

CSS

#group2 {
    visibility: hidden;
}

JQuery的

$(".field1",".field2",".field3").keyup(function () {
    if ($(".field1",".field2",".field3").val() != "") {
        $("#group2").css("visibility", "visible");
    } else {
        $("#group2").css("visibility", "hidden");
    }
});

Answer 1

我会尝试这样做：

$('#group1 > input[type="text"]').keyup(function () {
    if ($('.field1').val() !== '' && $('.field2').val() !== '' && $('.field3').val() !== '') {
        $('#group2').css('visibility', 'visible');
    } else {
        $('#group2').css('visibility', 'hidden');
    }
});

祝你好运！

Answer 2

您的Jquery中的比较运算符错误。它应该是！==，而不是！=

Answer 3

好的，所以我查看了你的代码并重新编写它以使其更灵活，并允许代码在其他地方使用（即其他形式，页面等）我编写了一些实用程序函数，一个帮助程序和包含jquery的正则表达式过滤器。

这些函数将使用dom元素数组或单个元素（因此您可以检查多个字段或只检查一个）

CSS中不同的主要特点是Class用于隐藏所有元素，它使用特定元素的ID来隐藏它。换句话说，给所有要隐藏"hidden"类的元素和每个元素一个唯一的ID然后将该ID传递给帮助者的unHideThis参数以取消隐藏它。将要检查的辅助dom元素传递给辅助函数的checkThis参数。

jsfiddle：link

示例html：

<div id="group1">

        <label>Field 1:</label>
        <input type="text" class="field1"/><br/>
        <label>Field 2:</label>
        <input type="text" class="field2"/><br/>
        <label>Field 3:</label>
        <input type="text" class="field3"/><br/>

</div>

<div class="hidden" id="part_1">

       <label>Field 4:</label>
       <input type="text" class="field4"/>

</div>
<div class="hidden" id="part_2">

       <label>Field 5:</label>
       <input type="text" class="field5"/><br>
       <label>Field 6:</label>
       <input type="text" class="field6"/>

</div>

示例css：

.hidden {
    visibility: hidden;
}

JS代码＆amp;正则表达式过滤器：

//regex filter http://james.padolsey.com/javascript/regex-selector-for-jquery/
// vvv Allows the use of regex to search with vvv
jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}
// ^^^ Allows the use of regex to search with ^^^

//main JS 
$(document).ready(function() {
    fieldsInitial = $("input:regex(class, field[1-3])")
    fieldsPart1 = $("input:regex(class,field4)")


    checkAndUnHide(fieldsInitial,"#part_1")
    checkAndUnHide(fieldsPart1,"#part_2")

})

// vvv my js code, place this in separate file to use the functions vvv
//Helper Function
function checkAndUnHide ( checkThis,unHideThis) {
    checkThis.keyup(unHideThis, function(event){ 
        unHide(checkThis,event.data)
    }) 
}

//checks if the .val() of each element is blank or not
function allElementsFilled(arrayOfDomElements) {
return !(arrayOfDomElements.map(function () {
         return $(this).val()})
         .get()
         .some(function (element) { return element == ""})
        )
}

//will unhide element if check's .val() is not blank
function unHide(check, element) {
    if(typeof check !== 'string'){
        if (allElementsFilled(check)) {
            $(element).css("visibility", "visible")            
        }
    }
    else{
        if(check.val != ""){
            $(element).css("visibility", "visible")
        }
    }
}

隐藏表单的各个部分，直到填写某些字段

3 个答案: