Question

当用户点击与其图像相关联的表单中的按钮时，我希望图像在成功时消失。我在实现这个方面遇到了麻烦。有什么建议吗？

    <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>

Answer 1

$('.span8').removeClass('video_id')类参数中没有点

编辑：正如你要求img从div中删除

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

删除div中的所有图片，

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

使用video_id类删除img，

如果你想隐藏元素

$('.span8').find('.video_id').hide()

Answer 2

首先是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;
   });

Answer 3

我从你的.removeClass()电话开始。它只需要一个参数，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();

Answer 4

removeClass只接受className而不需要在其中提供选择器元素

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

谢谢

Answer 5

我无法理解为什么图像会消失，因为它的显示没有任何变化。怎么样：

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

并添加css .goaway { display:none; }

Answer 6

removeClass()获取类的名称，而不是类的选择器。换句话说，你想摆脱点。

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

成功后如何删除元素类？

6 个答案: