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')类的参数中没有点

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

$('.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()调用开始。它只需要一个参数，this就是被忽略。并且类名前面不需要句号。

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

编辑：听起来您可能需要进行遍历。我假设您在 a 中有一个按钮和一个图像<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 只需要类名，不需要在里面提供选择器元素

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