0

document.ready の下にいくつかの jquery 関数があり、on() メソッドを使用してこれらの関数をバブルアップし、「さらに読み込む」ボタンを押したり、新しい投稿をフィード リストに追加したりします。

それにもかかわらず、新しい投稿をロ​​ードするときに投稿フッターを非表示にすることはできません。(document.ready を介して) ページを最初に読み込むときは機能しますが、新しい投稿では機能しません。私はすでに CSS 経由で直接試してみましたが、うまくいき、新しい投稿を追加しました。ただし、テキストエリア フィールド (フッターを表示するトリガー) をクリックしても機能しません。

おすすめは何ですか？ON() メソッドを使用する方法はありますか?

JS コード

$(document).ready(function(){
    $(".footer").hide();
    $(".comments-feed").hide();

    $('ol.list-feed').on('click', '.small-textarea-main-feed', function () {
        $(this).addClass("set-large");
        //$(this).("footer-post").show();
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
        $(this).next('div.footer').slideDown("fast");
        $(this).next('.comments-feed').slideToggle('200');
    });

    $('ol.list-feed').on('keyup', '.set-large', function () {
        $(this).next().find('button#cenas').prop('disabled', $(this).val() == '');
    });

    $('ol.list-feed').on('focusout', '.small-textarea-main-feed', function(){
        if ($(this).val() !== '') {
        } 
        else {
            $(this).removeClass("set-large");
            $(this).siblings('div.footer').hide();
            $(".comments-feed").hide();
        }
    });

    $('ol.list-feed').on('click', 'button#cancel', function () {
        $(this).parents('.footer').hide();
        $(this).parents('.footer').siblings('.small-textarea-main-feed').removeClass('set-large');
        $(this).parents('.footer').siblings('.small-textarea-main-feed').val('');
    });
});

投稿の HTML 部分

最初にページ (document.ready) を読み込むと、(.footer).hide() で必要なことを実行します。ただし、投稿を追加すると（そのためのフォームがあります-非常に単純です）、投稿がフィードに読み込まれ、投稿フッターが非表示になりません（以下のコード）。私が言ったように、「display:none;」を使用してフッターのスタイルを変更しようとしました。ただし、すべての投稿に影響します。

       <div id="" class="footer-condensed">
                                    <textarea class="small-textarea-main-feed" type="text" placeholder="Reply to @Gerardo"></textarea>
                                    <div id="" class="footer-post">
                                        <div id="" class="footer-submit-button" style:"display:none;">
                                            <button type="button" id="cancel" class="btn" onclick="cancel_button();" >Cancel</button>
                                                <span id="footer-btn-margin"></span>
                                            <button  type="button" id="hunch" class="btn btn-info">Hunch</button>
                                        </div>
                                    </div>
                                </div>

投稿をロードするための JS (はい、ここで hide() メソッドを使用しようとしましたが、機能しません - コメントにあります)

         $('form.cenas').submit(function() {
    // 
    var that = $(this),
    url = that.attr('action'),
    type = that.attr('method'),
    data = {};

    that.find('[name]').each(function(index, value) {

        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;

    });

    //event.preventDefault();
    $.ajax({

        url: url,
        type: type,
        data: data,
        cache: false, // it will force requested pages not to be cached by the browse
        success: function(html){
                    console.log(html);
                    $("ol#list-feed").prepend(html);
                    $("ol#list-feed li:first").slideDown(600);
                    //$("ol#list-feed > li.footer").hide();
                    //$("li.comments-feed").hide();

                    document.getElementById('set-width1').value='';
                    document.getElementById('tags').value='';

                    if ($("ol#list-feed > li").size() <= 3) {
                        $('#loadmorebutton').hide();
                    } else {
                        $("ol#list-feed > li:last").remove();
                        $('#loadmorebutton').show();
                    }

                }


    });
    //event.preventDefault();
    return false;
});
4

1 に答える 1

0

あなたのページの構造を理解しているかどうかはまだ完全にはわかりませんが、次のように思います。

  • 投稿のリストがあり、それぞれにフッター (.footer) が含まれています。
  • これらのフッターは、ページの読み込み時にすべて非表示になります ($(".footer").hide();)
  • また、新しい投稿を追加するためのフォームもあり、新しく追加された投稿がフッターを非表示にして表示されるようにします。

上記が正しければ、成功ハンドラーを次のように更新することで修正できるはずです。

success: function(html){
            console.log(html);

            //Create a jquery object from the returned html
            var newPost = $(html);

            //Hide the footer in the new post.
            $('.footer', newPost).hide();

            //Add the new post
            $("ol#list-feed").prepend(newPost);


            $("ol#list-feed li:first").slideDown(600);
            //$("ol#list-feed > li.footer").hide();
            //$("li.comments-feed").hide();

            document.getElementById('set-width1').value='';
            document.getElementById('tags').value='';
             if ($("ol#list-feed > li").size() <= 3) {
                $('#loadmorebutton').hide();
            } else {
                $("ol#list-feed > li:last").remove();
                $('#loadmorebutton').show();
            }
        }
于 2013-09-23T13:47:05.737 に答える