0

我正在将此 javascript 连接到服务器代码，但我无法选择正确的元素。无论我选择什么按钮，video_id 总是最终成为第一个（在本例中为“bbc”）。如何更改 javascript/jquery 以根据所选按钮为 video_id 选择正确的值？

    <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元素。您可以使用选择器this作为上下文video_id传递以获取descendants当前表单。

改变

$('#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 回答