2

ユーザーが画像に関連付けられたフォームのボタンをクリックすると、成功すると画像が消えます。これを実装するのに問題があります。何かアドバイス？

    <script type="text/javascript">
   $(document).ready(function() {
       $(".removebutton").submit(function(event){

       event.preventDefault();
            $.ajax({
                 type:"POST",
                 url:"/munch_video/",
                 data: {
                        'video_id': $('.video_id', this).val(), // from form
                        'playlist': $('.playlist').val(), // from form
                        'add_remove': $('.add_remove').val(), // from form 
                        },
                 success: function(message){                         
                        alert(message);
                        $('.span8').removeClass('.video_id', this);

                    }
            });
            return false;
       });

    });
</script>

<div class = "span8" style = "width: 900px;">
<!-- wrapper div -->
    <div class='wrapper huluDotCom'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

            <a href = "/partners/Business/huluDotCom">
                <img src = "/huluDotCom.png">
            </a>


        <!--  munchbutton div --> 
        <div class='munchbutton'>
            <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div>
                <input type="hidden" value="Channel" class = "playlist"/>
                <input type="hidden" value="huluDotCom" class = "video_id"/>
                <input type="hidden" value="remove_video" class = "add_remove"/>

                <input type='submit' class="btn btn-danger" value='Remove from plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
    <!-- end wrapper div -->


    <!-- wrapper div -->
    <div class='wrapper TheEllenShow'>

    <!-- image -->
    <div class="image" style="position: relative; left: 0; top: 0;">

            <a href = "/partners/Business/TheEllenShow">
                <img src = "/TheEllenShow.png">
            </a>


        <!--  munchbutton div --> 
        <div class='munchbutton'>
            <form method='post' action = '/munch_video/ ' class = 'removebutton'><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK' /></div>
                <input type="hidden" value="Channel" class = "playlist"/>
                <input type="hidden" value="TheEllenShow" class = "video_id"/>
                <input type="hidden" value="remove_video" class = "add_remove"/>

                <input type='submit' class="btn btn-danger" value='Remove from plate'/>
            </form>
        </div>
        <!-- end munchbutton div -->


    </div>
    <!-- end image div -->

    </div>
    <!-- end wrapper div -->

</div>
4

6 に答える 6

1

$('.span8').removeClass('video_id')クラスのパラメータにドットがない

編集：uがdivから削除するためにimgを要求したように

$('.span8').find('img').remove()

div内のすべての画像を削除するには、

$('.span8').find('img.video_id').remove()

video_idクラスでimgを削除するには、

要素を非表示にしたい場合

$('.span8').find('.video_id').hide()
于 2012-12-05T04:56:16.053 に答える
1

最初にあなたの場所をevent.preventDefault();停止しますので、デフォルトの実行を停止します。

したがって、return ステートメントについてのみ説明する必要があります。

次に、他のパラメーターを追加する必要がないため、次のremoveClassようになります

$this.closest('.image').remove();

$this保存された参照はどこにありますか。もしも$(this)

span8第三に、クラスと同様に要素を見つけることができなかったので、video_idコード全体を提供するか、すべての要素をもう一度確認する必要があります。

最後に、正しい結果が得られているかエラーが送信されているかどうか、php コードもチェックしてください。

これを試して。

$(".removebutton").submit(function(event){
        var $this = $(this);
        $.ajax({
             type:"POST",
             url:"/munch_video/",
             data: {
                    'video_id': $('.video_id', this).val(), // from form
                    'playlist': $('.playlist').val(), // from form
                    'add_remove': $('.add_remove').val(), // from form 
                    },
             success: function(message){                         
                    alert(message);
                    $this.closest('.image').remove();

                }
        });
        event.preventDefault();
        return false;
   });
于 2012-12-05T05:36:27.887 に答える
0

.removeClass（）呼び出しから始めます。引数は1つだけで、this無視されます。また、クラスの名前の前にピリオドは必要ありません。

//$('.span8').removeClass('.video_id', this);
$('.span8').removeClass('video_id');

編集：トラバーサルに取り組む必要があるようです。の中にボタンと画像があると仮定します。<div class="span8">次のようなものです。

<div class="span8">
    <img src="cat.jpg" />
    <a href="#" class="removebutton">remove</a>
</div>

次に、ターゲットからdivまで移動し、imgをドリルダウンする必要があります。

$(this).closest('.span8').find('img').remove();
于 2012-12-05T04:58:03.377 に答える
0

removeClass は className のみを受け取り、内部にセレクター要素を提供する必要はありません

$('.span8').removeClass('video_id');

ありがとう

于 2012-12-05T04:58:39.837 に答える
0

表示を変更するものがないため、画像が消える理由がわかりません。これはどう：

$('.span8').removeClass('video_id').addClass('goaway');

cssを追加します.goaway { display:none; }

于 2012-12-05T05:07:45.890 に答える
0

removeClass()は、クラスのセレクターではなく、クラスの名前を取ります。つまり、ドットを取り除きたいということです。

$('.span8').removeClass('video_id');
于 2012-12-05T05:34:39.543 に答える