Question

我将此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

Answer 1

问题是因为您有多个具有相同ID的元素。因此，挑选相同的元素。

由于您正在使用移除按钮点击，因此您可以在

中执行查找

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

Answer 2

此选择器$('#video_id')为您提供与选择器匹配的集合，但在其上使用val（）始终为applied到first元素。您可以将this作为context with selector传递给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;
   });

});

如何使用javascript选择正确的元素？

2 个答案: