Question

如果输入值为空，我试图删除父div，如果输入值不为空，则显示父div？

输入字段的值是动态的，这意味着它的值是另一个输入字段的值，我使用javascript执行此操作。

到目前为止，由于某种原因，我无法显示/隐藏父div。我怀疑原因是因为输入字段的值是动态的，这意味着用户没有在该输入字段中键入任何内容。他们正在输入另一个输入字段，动态输入字段的值也会相应更新。

这是我到目前为止显示/隐藏父div：

HTML：

<div id="BOTTEXT2" class="secTxt">
<input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="" size="12"  readonly="readonly"/>
</div>

JAVASCRIPT：

<script type="text/javascript">
if(document.getElementById("sect2").value == ""){
document.getElementById("BOTTEXT2").style.display="block";
}
</script>

有人可以帮我解决这个问题吗？

Answer 1

将您的代码包装在事件处理程序中：

window.onload = function() {
    var input = document.getElementById('sect2');
    input.addEventListener('change', function() {
        document.getElementById('BOTTEXT2').style.display = (input.value ? 'block' : 'none');
    }, false);
};

这样，无论何时更新输入，div状态都会相应地改变。

Answer 2

我不知道它是否适合您，但请遵循解决方案我从主div中创建了另一个输入类型来模拟情况我用过jQuery。在那之后，你可以设置自己的css。

HTML

<div id="BOTTEXT2" class="secTxt">
    <input type="text" class="sect2" id="sect2" style="border:none; background:none; " value="BSAU145D" size="12"  readonly="readonly"/>            
</div>
<input type="text" id="sect1">

Javascript（jQuery）

$(document).ready(function(){
    $('#sect1').keyup(function(){
        if($('#sect1').val() == 'test') {
            $('#BOTTEXT2').css({'display':'none'});
        } else {
            $('#BOTTEXT2').css({'display':'block'});
        }
    });
});

Here is the fiddle

如果输入值为空，则删除父div，如果输入值不为空，则显示父div？

2 个答案: