2011-12-27 111 views
-1

code is here我試圖讓父元素可見子元素獲取style="display:block;"時,我已經嘗試過,但我不能這樣做
我的代碼是在這裏:如何使父元素可見,當一個子元素是可見的使用jQuery

<br/><br/><br/> 
<div id="error_message_div"> 
    <div id="error_message_inner_div"> 
    <p class="color_red" id="name_error_message">please enter your name</p> 
    <p class="color_red" id="email_error_message">please enter your email address</p> 
    </div> 
</div> 
<div id="success_message">Thank you!</div> 
<form id="form1"> 
    <br/><br/> 
    Name : <input type="text" id="name" placeholder="enter your name" /><br/><br/> 
    E-id : <input type="text" id="email_id" placeholder="enter your email_address" /><br/><br/> 
    <input type="button" value="submit" id="form_submit" /> 
</form> 

我的CSS是:

.color_red{color:#f00;font-weight:bold;} 
#error_message_div{width:400px;padding: 2px 12px 3px 7px;border: 1px solid #f00;-moz-box-shadow: 1px 1px 4px #ccc;-webkit-box-shadow: 1px 1px 4px #ccc;box-shadow: 1px 1px 4px #ccc; 
-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;padding: 10px;background: white;-webkit-box-shadow: inset 0 0 20px #f00,1px 1px 4px #fff;-moz-box-shadow: inset 0 0 20px #f00,1px 1px 4px #fff;box-shadow: inset 0 0 20px #f00,1px 1px 4px #fff;color: black;right: 0;top: 0;}#error_message_inner_div{padding:15px;background:#fff;}#success_message,#name_error_message,#email_error_message{display:none;}#success_message{width:400px;border: 1px solid #00A300;-moz-box-shadow: 1px 1px 4px #ccc;-webkit-box-shadow: 1px 1px 4px #ccc;box-shadow: 1px 1px 4px #ccc;-webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px; 
-moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;padding: 10px;background: white;-webkit-box-shadow: inset 0 0 20px #00A300,1px 1px 4px #fff;-moz-box-shadow: inset 0 0 20px #00A300,1px 1px 4px #fff; 
box-shadow: inset 0 0 20px #00A300,1px 1px 4px #fff;} 

我的腳本是:

$('#form_submit').click(function() { 
    var name = $('input#name').val(); 
    var email = $('input#email_id').val(); 
    if (name == '') { 
     $('#name_error_message').show(); 
     return false; 
    } 
    if (email == '') { 
     $('#email_error_message').show(); 
     return false; 
    } 
    else { 
     $('#name_error_message,#email_error_message,#error_message_div').hide(); 
     $('#success_message').show(); 
     return false; 
    } 

}); 

回答

3

更新您的代碼位的jsfiddle下一次的jQuery功能 http://jsfiddle.net/tive/pFFDk/1/

選擇jQuery框架。 標準是在mootools

+1

好,但是這不是一個答案,它的評論。 – 2011-12-27 09:23:45

+0

有時候,答案只是盯着你的眼睛... – 2011-12-27 09:50:48

+0

@TimVermaelen - 作爲答案發布的評論被認爲是獲得SO聲望點的不公平方式。 – mac 2011-12-27 11:06:35

1

看看this,代碼工作正常。你包括mootools,你必須包括jquery。

相關問題