0

私はjqueryが初めてで、問題に悩まされています。4 つの画像を含む Web ページをデザインしようとしていますが、クリックされた現在の画像の詳細を示すダイアログ ボックスがポップアップ表示されるようにします。ただし、ダイアログ ボックスのテキストを変更することはできず、常に最初の画像の詳細が表示されます。

クリックされた画像を識別するために非表示フィールドに数値が設定され、これが GetDetail1() および GetDetail2() 関数によって使用され、適切な詳細を含む文字列が返されます。スクリプトは次のとおりです。

<asp:HiddenField runat="server" Id="JavascriptValue" value="1"/>
<div id="dialog-block">
<b>Detail1:</b>
<table border="0">
    <tr>
    <td><% =GetDetail1() %></td>
    <td colspan="2">
        <img src="Assets\people\silhoeutte1.jpg" width="100" height="100" style="padding-left: 100px;" /></td>
    </tr>
    <tr>
    <td><b>Detail2:</b></td>
    </tr>
    <tr>
    <td><% =GetDetail2() %></td>
    </tr>
    </table>
</div>
<script type="text/javascript">
// the jQuery document ready handler
$(function () {
    var name;
    // create our dialog
    $('#dialog-block').dialog({
    title: '<%=GetImageName()%>',
    oneInstance: false,
    autoOpen: false,
    width: 400,
    buttons: {
        "Close": function () {
        closeDialog($(this))
        }
    }
    });

// the images to open the dialog
$('#image1,#image3,#image2,#image4').click(function (event) {
    if (this.id == 'image1') {
    document.forms['form1'].JavascriptValue.value = "1"; //set the value
    $('#dialog-block').dialog('open');
    }
    else if (this.id == 'image2') {
    document.forms['form1'].JavascriptValue.value = "2"; //set the value
    $('#dialog-block').dialog('open');
    }
    else if (this.id == 'image3') {
    document.forms['form1'].JavascriptValue.value = "3";//set the value
    $('#dialog-block').dialog('open');
    }
    else if (this.id == 'image4') {
    document.forms['form1'].JavascriptValue.value = "4"; //set the value
    $('#dialog-block').dialog('open');
    }
});
});

function closeDialog(elem) {
    elem.dialog("close");
}
</script>

GetDetail 関数

public String GetDetails1()
{
    List<User> imagelist = DatabaseAccessor.getImagesFromDataBase();
    return imagelist[Convert.ToInt32(JavascriptValue.Value)].Detail;
}
4

1 に答える 1

1

あなたの問題はこれらの行にあると思います document.forms['form1'].JavascriptValue.value。このようにする必要がありますdocument.getElementById("JavascriptValue").value。非表示フィールドはデフォルトで 1 に設定されているため、最初の画像の詳細が常に取得されます。

于 2013-01-30T08:22:58.177 に答える