Question

我有3个输入文本，我想显示一个div，如果一个超过3，一个不同的div，如果2个输入超过3，等等。我怎么能用javascript做到这一点？

<input type="text" id="text1" name="text1" />
<input type="text" id="text2" name="text2" />
<input type="text" id="text3" name="text3" />

我尝试了这个，但它不起作用

function display() {
    if ($('#text').val() != '') {
        document.getElementById('green').style.display = 'block';
    }   
}

Answer 1

CSS

#a, #b, #c {
    visibility:hidden;
}

HTML

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

的JavaScript

var istext1filled = document.querySelector('input#text1').value.length>0;
var istext2filled = document.querySelector('input#text2').value.length>0;
var istext3filled = document.querySelector('input#text3').value.length>0;

if(istext1filled) {
    document.querySelector('div#a').style.visibility = 'visible';
}
if(istext2filled) {
    document.querySelector('div#b').style.visibility = 'visible';
}
if(istext3filled) {
    document.querySelector('div#c').style.visibility = 'visible';
}

Answer 2

我认为这里存在误解。 @Domenico问道

我有3个输入文字，我想显示一个div，如果一个满3个，一个不同的div，如果2个输入超过3，等等。

如果我没有误解他的陈述：我认为他正在讨论填充的输入数量，而不一定是填写的特定输入。

因此JSFiddle：

#div_1, #div_2, #div_3{
    display: none;
}


<input type="text" id="text_1" name="text1" value="" />
<input type="text" id="text_2" name="text2" value=""/>
<input type="text" id="text_3" name="text3" value="" />

<div id="div_1">Only ONE input is filled</div>
<div id="div_2">Only TWO inputs are filled</div>
<div id="div_3">All THREE inputs are filled</div>


$(document).ready(function() {
    $("input[id*='text']").blur(function() {
        var counter=0;
        $("input[id*='text']").each(function(ind, val){
            if($(val).val().trim()!==""){
                counter++;
            }
        });

        $("#div_1, #div_2, #div_3").hide();

        $("#div_"+counter).show(); 
    });
});

但是，如果你想要反过来，这里也是solution：

#div_1, #div_2, #div_3{
    display: none;
}


<input type="text" id="text_1" name="text1" value="" />
<input type="text" id="text_2" name="text2" value=""/>
<input type="text" id="text_3" name="text3" value="" />

<div id="div_1">Input ONE is filled</div>
<div id="div_2">Input TWO is filled</div>
<div id="div_3">Input THREE is filled</div>


$(document).ready(function() {
    $("input[id*='text']").blur(function() {

        $("#div_1, #div_2, #div_3").hide();
        $("input[id*='text']").each(function(ind, val) {
            if ($(val).val().trim() !== "") {
                console.log("div_"+$(val).prop("id").split("_")[1])
                $("#div_"+$(val).prop("id").split("_")[1]).show();
            }
        });

    });
});

检查输入文本是否已填满并显示不同的div

2 个答案: