0 
    <script type="application/javascript">

    $(document).ready(function() {  
        $('input#newcommentinput').click(function() {
            $(this).hide();
            $(this).parent('.commentplaceofnewmodernpost').children('.newcommenttableinnewmodernpost').show();
            $('.textreaofnewcommentinnewmodernpost').focus(); 
        });
        $("input.postnewcomment").click(function() {
                var message=$(this).parent('.newcommenttableinnewmodernpost').children('.textreaofnewcommentinnewmodernpost').val();
                var post_id=$('.textreaofnewcommentinnewmodernpost').attr('id');
                alert(message);
                    if(message.length > 0){
                        $.post("PAGE_TO_POST", {comment:""+message+"",post_id:""+post_id+""}, function(data){
                            if(data.length >0) {
                                $('#newcommenthere').append(data);
                                $('table.newcommenttableinnewmodernpost').hide();
                                $('input.inputofnewcommentinnewmodernpost').show();
                                $('textarea.textreaofnewcommentinnewmodernpost').val('');
                                $('input.inputofnewcommentinnewmodernpost').val('Click to post comment...');
                            }
                        });}
        });

    });
</script>   

        <div class="commentplaceofnewmodernpost">
            <input class="inputofnewcommentinnewmodernpost watermarkpostcomment" id="newcommentinput">
            <table class="newcommenttableinnewmodernpost">
                <tr>
                    <td class="imgtdofnewcommenttable">
                        <img src=" IMG_ SRC" class="imgofdisplaycomment">
                    </td>
                    <td style="vertical-align:top;">
                        <textarea class="textreaofnewcommentinnewmodernpost watermarkpostcomment newcommenttextareaexpand" autocomplete="off" title="Click to post comment" id="POST_ID"></textarea>
                        <input type="button" class="greenbutton postsubmitbutton postnewcomment" value="Comment" title="Post comment" alt="Post comment" style="padding:5px 10px;margin-top:5px;" id="postnewcomment">
                        <input type="button" class="normalbutton postsubmitbutton" value="Cancel" title="Close to post comment" alt="Close to post comment" style="padding:5px 10px;margin:5px 0 0 15px;" id="cencalnewcomment">
                    </td>
                </tr>
           </table>
        </div>

これは私のHTMLコードです。ボディがinputid= "newcommentinput"をクリックすると、この入力を非表示にして、その後にテーブルを表示し、その後にフォーカスを合わせます。また、ボタンid = "postnewcomment"をクリックすると、メッセージが別のページに投稿され、結果が表示され、テーブルが非表示になり、以前の入力が表示されます。

jqueryでこれを行う方法は？

今、私は上記のjqueryコードを使用して上記のステートメントを実装しています...

注意：ページには複数のdivがあるので、複数選択の答えを書いてください。

4

1 に答える 1

1

これは、イベントをクラスにバインドするための小さなコードです...

多分あなたはjqueryのドキュメントを読み始めるべきです

    $(document).ready(function() {
            $(".inputofnewcommentinnewmodernpost").focusin(function() {
                    $(this).hide();
                    $(this).parent().find('.newcommenttableinnewmodernpost').show();
            });

            $('.postnewcomment').bind('click', function() {
                    $(this).parents('table').hide();
                    $(this).parents('.commentplaceofnewmodernpost').find('.inputofnewcommentinnewmodernpost').show();
            });
    });
于 2012-07-21T16:48:17.323 に答える