0

我正在制作一个页面，其中所有图像都从服务器/数据库中检索出来，并显示在页面上。为此，我使用 AJAX。下面的代码检索包含对图像的引用和索引的数组。根据该信息，我排列图像。我想做的是让用户可以删除选择的图像。应通过复选框选择这些图像。我的问题是我不知道如何添加一个复选框（在图像下方）以便它对应于每个图像，并且还在 C# 代码中找到该检查值。我需要找到它，因为我必须在数据库中找到已检查的图像并将其删除。有谁知道如何做到这一点？通常要在 C# 代码中查找 ID，我们在 aspx 页面上应用 runat="server"，但这次，ID 是动态添加的，并且使用 JS 代码。

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='img_"+i+"' src='" + array[index] + "' />");
        index++;
    }
}
4

1 回答 1

1

在这种情况下，我喜欢利用 HTML5 数据属性（http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with -the-data-attributes ) 这允许您在其标记中嵌入复选框的目标。以下内容尚未经过测试，我猜测了您的复选框标记，希望它能给您提供想法。

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        var imageId = 'img_"+i+"';
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='" + imgeId + "' src='" + array[index] + "' />");
        $("#parentDiv").append('<input type="checkbox" class="imgDelete" name="imgCheck" data-image-target="' + imageId + '">')
        index++;
    }
}

然后你将一个处理程序绑定到你的复选框，如下所示：

$('imgDelete').click(function(e){
    var idOfImageToDelete = $(this).attr('data-image-target');
    ///Call to web service to delete image
});

您还可以使用 jQuery 的 data() 函数嵌入数据，但我个人更喜欢将数据写入元素的标记中，这样我可以使用我的开发人员工具包更好地查看它。

于 2013-08-17T19:34:31.437 回答