2

この前置方法は私にとってはうまくいきます：

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                                            $(this).prepend('<p> DARN </p>'); // <=== This here WORKS
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate({ // Then Animate
                        width:"500px",
                        left:'+=400px',}, 
                        400
                    );                                                                  
                });                 
            });
        });
    </script>

この前置方法は私にはうまくいきません：

   <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#learn-more-button").click(function() {
                $("#main-text").prepend('<p> DARN </p>'); // <=== This here doesn't work
                $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate({ // Then Animate
                        width:"500px",
                        left:'+=400px',}, 
                        400
                    );                                                                  
                });                 
            });
        });
    </script>

2 番目の方法が機能しないのはなぜですか? それを機能させるにはどうすればよいですか？

私は本当にjQueryの男ではないので、助けていただければ幸いです:)

4

1 に答える 1

5

を実行するload()と、要素の内容#main-textが完全に置き換えられます。したがって、2 番目の方法のように - の<p>DARN</p>前に追加するloadと、上書きされます。

最初のメソッドで<p>は、ロードのコールバック関数に が追加されています。これは、ロードが完了した後に呼び出されます。

次のように、パフォーマンスを向上させるために、メソッドを 1 つのセレクターにチェーンする必要もあります。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#learn-more-button").click(function() {
            $("#main-text").load('ajax/learn-more.html #learn-more', function() {
                $(this).prepend('<p> DARN </p>')
                    .hide().fadeIn(500)
                    .animate({
                        width:"500px",
                        left:'+=400px'
                    }, 400);
            });                 
        });
    });
</script>
于 2012-01-11T11:01:50.340 に答える