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 に答える