我正在创建一个移动网站，其中列出了摩托车模型的图片。我创建了每个图片的列表list-item，并在div内添加了data-rel="popup" list-item。一切都正确编译和运行，但我在列表中单击的任何图像只显示第一个图像。即，当单击列表中的第3个列表项并打开弹出窗口时，将显示图像＃1。对于列表中的每个链接也是如此。
你知道为什么这样做吗？我知道我可以通过创建另一个jquery页面来解决这个问题，然后重定向到那个，但是弹出窗口更清晰，我很好奇如何显示正确的图像，或者我是否忽略了什么？
所有图像和数据都存储在sql server数据库中
以下是代码：
<div data-role="content">
<div id="SelectedPictorialDiv" runat="server">
<ul data-role="listview" id="SelectedPictorialList">
<asp:Repeater ID="SelectedPictorialRepeater" runat="server" DataSourceID="SelectedPictorialSqlDataSource">
<ItemTemplate>
<li>
<a href="#SinglePicturePopup" data-rel="popup">
<asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='<%# Eval("ImageURL") %>' Width="75px" />
  <asp:Label ID="SelectedImageNumberLabel" runat="server" Text='<%# Eval("ImageNumber") %>'></asp:Label>
<asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='<%# Eval("PictorialNumber") %>' />
</a>
<div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
<asp:Image ID="PopupImage" runat="server" ImageUrl='<%# Eval("ImageURL") %>' Width="100%" />
</div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:KgIndex %>"
SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >
<SelectParameters>
<asp:QueryStringParameter Name="modelID" QueryStringField="ModelID" Type="String" Direction="Input" />
<asp:QueryStringParameter Name="pictorialNumber" QueryStringField="Pictorial" Type="String" Direction="Input" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</div>
这是呈现的HTML：*顶部的jquery是我正在努力根据名称导航列表的一部分
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<!--STANDARD JQUERY-->
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&effect=shadow-multiple|3d-float" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="JQuery/jquery-ui.js"></script>
<script src="JQuery/jquery-ui.min.js"></script>
<link rel="stylesheet" href="JQuery/jquery-ui.css" /><link rel="stylesheet" href="JQuery/jquery-ui.min.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme-smooth.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme.min-smooth.css" />
<!--JQUERY MOBILE-->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript">
$.mobile.document.on("pagecreate", "#MainPage", function () {
var head = $(".ui-page-active [data-role='header']");
$.mobile.document.on("click", "#sorter li", function () {
var top,
letter = $(this).text(),
divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")");
if (divider.length > 0) {
top = divider.offset().top;
$.mobile.silentScroll(top);
} else {
return false;
}
});
$("#sorter li").hover(function () {
$(this).addClass("ui-btn").removeClass("ui-li-static");
}, function () {
$(this).removeClass("ui-btn").addClass("ui-li-static");
});
});
$(function () {
$.mobile.window.on("scroll", function (e) {
var headTop = $(window).scrollTop(),
foot = $(".ui-page-active [data-role='footer']"),
head = $(".ui-page-active [data-role='header']"),
headerheight = head.outerHeight();
if (headTop < headerheight && headTop > 0) {
$("#sorter").css({
"top": headerheight + 15 - headTop,
"height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10
});
$("#sorter li").height("3.7%");
} else if (headTop >= headerheight && headTop > 0 && parseInt(headTop +
$.mobile.window.height()) < parseInt(foot.offset().top)) {
$("#sorter").css({
"top": "15px",
"height": window.innerHeight - 8
});
$("#sorter li").height("3.7%");
} else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
foot.height()) {
$("#sorter").css({
"top": "15px",
"height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
parseInt(foot.offset().top) + 8)
});
} else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top)) {
$("#sorter").css({
"top": "15px"
});
} else {
$("#sorter").css("top", headerheight + 15);
}
});
});
$.mobile.window.on("throttledresize", function () {
$("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
});
$.mobile.document.on("pageshow", "#MainPage", function () {
var headerheight = $(".ui-page-active [data-role='header']").outerHeight();
$("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
});
</script>
</head>
<body style="height: 100%">
<form method="post" action="MViewSinglePictorial.aspx?ModelID=54&Pictorial=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="NtunFH788MQGLcGyEh8HoEOdwbObwbacfVa/s8udGTFe/UkrCRJNxrRKCnBmeHyR6D35FD/Hva0TbXOMtMY4AoPO7qph/zkehvgprXlu9PO7V9/p4kjdfu/H+D9cxJTr9HRL4a+IYOQyWlyM5u/h8yUB+NmNevjV79ocimb7ZPhu+rHb/v5j8+G20jr+qWuL0HJ1KPeEIwT61PWdL+unaFxg0iDBv4yKpJRBt6XZ4w7je7/HQrW1idea3rrUyP3RRpNdQVgg6rkEQXfzDg1w2FApc5la9MLVmxN5Z54NUxxervspKMIZFQGZ155yxlFRn4HPCJ11XcgjeG8r2nXKT2ybhjip32pSNDBRQpGqL4uoHTix6RJWxGXJQtg3ssK22TX+8AB9YUNCKa7SCYJzuCDl8Ri3n5A3yQRyYVi4O6K2TmRBgesR8oBNtLVthcPb8lmcsm4kQkJsiXoam8hC3O7CKQmhRcSuq7GkWEaJCKg/7jYHUOezcUv5g4KYk7U2Mcp/YUcO+g6B7MMWiYBMLn944h6EVEoPtUBWLd36sY1V7RtfWo5KgeXARKZwA5o5RKTCSkDSBlwRu6frjCNL+11iKY+VKEIMQtDkgeo03eR2xGo1G7MaLfOrrhCDocE0g4zSNVU6AXXI8m7jFC+ca6Rd51b34TAojyC54iYN5g0Qvo6VPKgXqrDOjEBj3wiB4oF3V/HI0JL6K2+BKQ3C35SihGtNbLr5swq+EkYvNDeDvj8KaS0GNe8wigGzcGChtfrMg7Y5W799xPFIb8hhSToU4czDz69PslwFhLRDyQV02QP+vg+ZWhnWbKaOO+M25BNBRu1OlYPgLzQjRZtPyPkJqBKeX77FQn7MSho+8oKdKwPsnLdDOJ+YsRKWvX1Rx0Fz7mOJVtTEbKu0ro2miAR1M1xzpYMUZAYzM7hr0Jzo+0c4gszyePavEj5cfIotOQ75Qecd2CgHgMum/s7m2VcI30dszd2JsunKv1YEWzN0GT61lAjd+rcn7O3DfI3oEqurABKpiE+R4kfwuBVk7wmxpMTtMKuowVOXVck0MCCaGVt0WzUGiSHLzUbXm0l2PhQt9rUGnyJ3hCnq2oCOtXhgqSMBslfYa8dUzx/VY93vDVkh+3jhKOfDhCAUg6+6l06nybh07E/W2mHYicCEQplwyojMecYywXsAFuh8p8jDXlqdQWKvwhObc1PLTOwgqfo6kbbdhAWSVMTYJzIoxIh3Up/G3Tb9rzZumHlczVhWh3NKsd3uRx6tH9XDnURspHzkSoq+PTpEwQ7yOvieA4wGfWojv/ti6OQ4iZlGGRm9/IV7/oyTLQIVoOszz6g0rQmGxaB8CzIaqu8x/uLxXWh+EqBEqy+njoV+UcDUjs9UgV7lmJGUKMT0Fu6fwCZZHwaaJWyPXr/+UTwIT8h/ZCFAg4Et5ErRUKRdZjh78FUIEuE0Kam0ovpwgkGtQ+aWGQAp18dgs8ofwcODrN1ULELf/AonI05kZT0Ucg9L1bdsiSoaMXP9g+PwUWRpproGafMMytF/fSvbESmcFt+GJw2lgfPFgaEZe1uR8A3PgSSmtLNqmi+0szL39ob2U67qdqWbtsU2HoBTqaf2WWsjf1mdQpUsZFPhTVRB9KiZosWoKXyChuhjEzkdWoH/PgjYN+0lRPhTZL4mteJpAfqGvA==" />
</div>
<script type="text/javascript">
function ViewSingleImage(selectedDetails) {
//array[0] = image number
//array[1] = pictorialNumber
//array[2] = modelID
var array = selectedDetails.split(',');
window.location.href = "MViewSinglePicture.aspx?ModelID=" + array[2] + "&pictorial=" + array[1] + "&image=" + array[0];
}
function Redirect(location) {
if (location == "Dashboard") {
window.location.href = "MDashboard.aspx";
}
else if (location == "Models") {
window.location.href = "MViewModels.aspx";
}
}
</script>
<div id="MainContent_MainPage" data-role="page" data-url="MainPage" style="height: 100%" data-theme="a">
<div data-role="header" data-theme="b" data-position="fixed">
<div data-role="navbar" class="ui-icon-heart" data-grid="b">
<ul>
<li><a id="HomeA" class="ui-icon-home" onclick="Redirect('Dashboard');" data-icon="custom"></a></li>
<li><a id="ModelsA" class="ui-icon-bullets" onclick="Redirect('Models');" data-icon="custom"></a></li>
<li><a id="SearchModelsA" class="ui-icon-search" onclick="Redirect('Models');" data-icon="custom"></a></li>
</ul>
</div>
</div>
<div data-role="main" class="ui-content">
<div data-role="body">
<p>Images</p>
<div data-role="content">
<div id="MainContent_SelectedPictorialDiv">
<ul data-role="listview" id="SelectedPictorialList">
<li>
<a href="#SinglePicturePopup" data-rel="popup">
<input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:75px;" />
  <span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_0">1</span>
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_0" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" />
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_0" value="1" />
</a>
<div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
<img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:200px;" />
</div>
</li>
<li>
<a href="#SinglePicturePopup" data-rel="popup">
<input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:75px;" />
  <span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_1">2</span>
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_1" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" />
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_1" value="1" />
</a>
<div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
<img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:200px;" />
</div>
</li>
<li>
<a href="#SinglePicturePopup" data-rel="popup">
<input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:75px;" />
  <span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_2">3</span>
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_2" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" />
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_2" value="1" />
</a>
<div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
<img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:200px;" />
</div>
</li>
<li>
<a href="#SinglePicturePopup" data-rel="popup">
<input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:75px;" />
  <span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_3">4</span>
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_3" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" />
<input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_3" value="1" />
</a>
<div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
<img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:200px;" />
</div>
</li>
</ul>
<span id="MainContent_SelectedPictorialLabel"></span>
<input type="hidden" name="ctl00$MainContent$ModelIDHiddenField" id="MainContent_ModelIDHiddenField" />
<input type="hidden" name="ctl00$MainContent$SelectedPictorialHiddenField" id="MainContent_SelectedPictorialHiddenField" />
</div>
</div>
</div>
</div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="rcVSDhHOh/VCV4xvZW1xySlgIk+aKBCHWnqXQ/hbRyJ3Q+19pQPrrjB8bdWGFG8Os0xdxZMZQZINDmkHDm1+4DTPwLkjXqC+3lHpYvBzjNOAZSPI9ZLjeK7GpS/Qqwlzw+yGLFoO7IPk2hVzdFndH4en1nBGJuB3fF5+/jPr8dUi7oHYnloqnnYr1bmoqJMyYqf/iAf4gr9vfMA4L7LhvOqOMx/MaTeuTZDXFwjkROfwODzrE3fNaT8UCGvRPeRtR6z1xhfSzsZX6/YrPxrfP8pAzqmM/WcxvQvjwgS9G+VPdoByMI1vbqLLRgmT2C0T4HrkHC54DZCHQuIy3NqZB8woDZP5pe2jjOJF44LeTwngdosmRqjwIsN1QMXoFh24fi3TVmnXm3jHyJCmRa51wA==" />
</div></form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"c17b133f1b354c05bd3175a66999aee5"}
</script>
<script type="text/javascript" src="http://localhost:54681/00b84f193a774765ab59c6705f4e8d6b/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
答案 0 :(得分：1)
您可以简单地创建一个全局弹出窗口并更新其中的＆＃39;而不是创建多个弹出窗口来实现相同的目的。内容基于点击的 listview 项目。
将所有 listview 项目设为class，并在页面的pagecrate附加事件听众。
<li>
<a href="#" class="thumb">
<input type="image" src="img.jpg"/>
</a>
</li>
在页面div 中创建一个弹出窗口。
<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>
listview 项目收到事件后，检索弹出，列表视图项和图像src 。将检索到的图像插入弹出窗口，然后在加载图像后将其打开，以确保弹出窗口位于列表视图项。
$(document).on("pagecreate", "#pageID", function () {
/* attach event listener */
$(".thumb").on("click", function (e) {
/* retrieve data */
var popup = $("#myPopup"),
elm = $(this),
img = $("input", elm).attr("src");
/* insert img into popup and the open it */
popup.html($("<img/>", {
src: img
}).one("load", function (e) {
popup.popup("open", {
positionTo: elm
});
}));
});
});
<强> Demo