查找最近的图像元素并刷新图像源

时间:2016-02-12 15:53:25

标签: javascript jquery html

我有以下标记

<div class="col-md-4">
    <div class="row">
        <img name="previewImage" alt="" src="" style="max-height:300px;max-width :350px;">
    </div>
    <div class="row">
        <button name="btnPushPhoto" type="button" class="btn btn-default" tabindex="-1">Push</button>
        <button name="btnRemovePhoto" type="button" class="btn btn-default" tabindex="-1">Remove</button>
    </div>
</div>

当我点击删除照片按钮时,我可以将我的图像设置为空(在服务器端),但是在客户端,我在查找图像标记时遇到一些困难,并刷新它。

$(document).on("click", "[name=btnRemovePhoto]", function () {
    var r = confirm("Are you sure you want to remove the photo?");
    if (r == true) {
        var uniqueId = $(this).data('uniqueId');
        $.post($("#remove-photo-url").val(), { uniqueId: uniqueId })
            .done(function () {
                //var img = $(this).closest('[name=previewImage]');
                var img = $(this).parent().parent().find('[name=previewImage]');
                console.log(img);                            
                img.attr('src', '');
                img.attr('src', img.attr('src') + '?' + Math.random());
            });

    }

});

这里似乎没有发生任何事情。浏览器的控制台没有错误。

这是console.log(img);

的输出
[prevObject: x.fn.x.init[0], context: undefined, selector: "[name=previewImage]"]

5 个答案:

答案 0 :(得分:1)

试试这个:

7h 57min / 3h 57min !?
7h 57min / 3,95 = 2h 56min

答案 1 :(得分:1)

你应该在发布请求之前将Test(actions=[ {'fixed_key_1': 'foo4', 'fixed_key_3': [ {'key1': 'foo2'}, ]} }).save() Test.objects.filter(actions__contains=[{'fixed_key_3': [{'key1': 'foo2'}]}]) 存储在某个变量中,因为在回调中,这是指Ajax调用的jqXHR对象,而不是事件处理程序绑定的元素:

$(this)

然后您可以使用_this = $(this); 代替:

parents()

希望这有帮助。

答案 2 :(得分:1)

您应该在img函数之前移动$.post定义:

$(document).on("click", "[name=btnRemovePhoto]", function () {
    var img = $(this).parent().parent().find('[name=previewImage]');
    var r = confirm("Are you sure you want to remove the photo?");
    if (r == true) {
        var uniqueId = $(this).data('uniqueId');
        $.post($("#remove-photo-url").val(), { uniqueId: uniqueId })
        .done(function () {
            //var img = $(this).closest('[name=previewImage]');
            console.log(img);                            
            img.attr('src', '');
            img.attr('src', img.attr('src') + '?' + Math.random());
        });
    }
});

答案 3 :(得分:0)

你可以使用jQuery选择器&#34;最接近&#34;

https://api.jquery.com/closest/

           $(document).on("click", "[name=btnRemovePhoto]", function () {
                var clickedButton = $(this);
                var r = confirm("Are you sure you want to remove the photo?");
                if (r == true) {
                    var uniqueId = $(this).data('uniqueId');
                    $.post($("#remove-photo-url").val(), { uniqueId: uniqueId })
                        .done(function () {
                            var img = clickedButton .closest("div.col-md-4").find("img");
                            console.log(img);                            
                            img.attr('src', '');
                            img.attr('src', img.attr('src') + '?' + Math.random());
                        });

                }

            });

答案 4 :(得分:0)

我认为您正在搜索/查看关系的方式需要稍微进行编辑。有一些jquery方法可能会有所帮助,但我通常喜欢在下面描绘出我的关系:

<div name="PARENT_of_PARENT_of_X">
                    <div name="Sibling_of_PARENT_of_X OR child_of_PARENT_of_PARENT_of_X>
                        <img name="Child_of_SIBLING_of_PARENT_of_X OR CHILD_of_PARENT_of_PARENT_of_X" />
                    </div>
                    <div name="PARENT_of_X">
                        <button ></button>
                        <button name="SOURCE X" >Remove</button>
                    </div>
</div>