0

このJavaScriptをサーバーコードに接続していますが、適切な要素を選択するのに問題があります。選択したボタンに関係なく、video_idは常に最初のボタン（この場合は「bbc」）になります。選択したボタンに応じてvideo_idに適切な値を選択するようにjavascript/jqueryを変更するにはどうすればよいですか？

    <script type="text/javascript">
   $(document).ready(function() {
       $(".removebutton").submit(function(event){
       event.preventDefault();
            $.ajax({
                 type:"POST",
                 url:"/munch_video/",
                 data: {
                        'video_id': $('#video_id').val(), // from form
                        'playlist': $('.playlist').val(), // from form
                        'add_remove': $('.add_remove').val(), // from form 
                        },
                 success: function(message){                         
                        alert(message);
                        $('.span8').html(message);
                    }
            });
            return false;
       });

    });
</script>


        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="bbc" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

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

        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="toyota" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

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

        <form method='post' action = '/munch_video/ ' class = 'removebutton'>{% csrf_token %}
            <input type="hidden" value="Channel" class = "playlist"/>
            <input type="hidden" value="gm" id = "video_id"/>
            <input type="hidden" value="remove_video" class = "add_remove"/>

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

        can be multiple buttons, each with a different video_id value
4

2 に答える 2

2

問題は、同じIDを持つ複数の要素があるためです。したがって、同じ要素が選択されます。

削除ボタンのクリックに取り組んでいるので、次のように検索を行うことができます

'video_id': $(this).find('#video_id').val()
于 2012-12-05T04:23:13.547 に答える
1

このセレクター$('#video_id')は、セレクターと一致するコレクションを提供しますが、常に要素に対してval（）を使用appliedします。セレクターを使用してコンテキストとしてfirst渡し、現在の形式で取得できます。thisvideo_iddescendants

変化する

$('#video_id').val()

に

$('#video_id', this).val()

または、find（）メソッドを使用して、子孫のIDを検索します

$(this).find('#video_id').val();

クリックしたフォームを削除するには編集します

$(document).ready(function() {
   $(".removebutton").submit(function(event){
   currentForm = $(this);
   event.preventDefault();
        $.ajax({
             type:"POST",
             url:"/munch_video/",
             data: {
                    'video_id': $('#video_id').val(), // from form
                    'playlist': $('.playlist').val(), // from form
                    'add_remove': $('.add_remove').val(), // from form 
                    },
             success: function(message){                         
                    alert(message);
                    $('.span8').html(message);
                    currentForm.remove();
                }
        });
        return false;
   });

});
于 2012-12-05T04:22:44.770 に答える