Question

我有一个表单，当某些输入被填充时，另一个div将显示在表单下方。以下是代码：

<form>

<div class="fieldtitle">Full Name:* </div><input type="text" value="" name="fullname" id="fullname" />
<div class="fieldtitle">Email:* </div><input type="text" value="" name="email" id="emailfield" />
<div class="fieldtitle">Contact No:* </div><input type="text" value="" name="contact" id="contact" />

</form>

<div id="demo1" style="width:300px; display:none;"></div>

<script type="text/javascript">

$("#formarea").keyup(function(){
    if($(fullname).val() && $(emailfield).val() && $(contact).val() && $(quantity).val()) {
        $("#demo1").show();
        if($.browser.msie){
           $('#demo1').css({"visibility":"visible"});
        }
    } else {
        $("#demo1").hide();
    }

});

</script>

除IE之外，它适用于所有浏览器 - 有关如何解决此问题的任何建议吗？

Answer 1

IE不喜欢建议的ID或名称选择器，你不要以正确的方式使用它。指定您要定位的选择器。

e.g：取代

$(fullname)

使用

$('#fullname')

等等......

顺便说一下，在您的示例代码中看不到ID为'formarea'的任何表单。并删除它：if($.browser.msie){...}它没用。

Answer 2

html缺少数量字段，这将导致Javascript中出现逻辑问题。

<form>
    <div class="fieldtitle">Full Name:* </div><input type="text" value="" name="fullname" id="fullname" />
    <div class="fieldtitle">Email:* </div><input type="text" value="" name="email" id="emailfield" />
    <div class="fieldtitle">Contact No:* </div><input type="text" value="" name="contact" id="contact" />
    <div class="fieldtitle">Quantity:* </div><input type="text" value="" name="quantity" id="quantity" />
</form>

    <div id="demo1" style="width:300px; display:none;">Test</div>

Javascript将事件绑定到错误的元素。它应绑定到inputs而不是表单。另外，为每个输入传入的选择器应该是使用css id选择器的字符串文字。

$("input").keyup(function(){
    if($("#fullname").val() && $("#emailfield").val() && $("#contact").val() && $("#quantity").val()) {
        $("#demo1").show();
    } else {
        $("#demo1").hide();
    }
});

也没有必要使用IE条件。 Jquery的show()/hide()方法与浏览器兼容。示例：http://jsfiddle.net/DEfVS/1/

关于IE的Jquery .show问题

2 个答案: