我使用asp .net和c＃制作网页。
https://www.zoya.com/content/category/Zoya_Nail_Polish.html
上面是我需要为我的应用程序复制的参考页面。以下是我正在使用的代码。 （我简化了每个产品查找图像数量到每个项目固定3个图像的复杂性）
但是当我点击图片以来，因为我回调了结束代码，页面变得清爽。
在参考页面中，鼠标单击时会发生选择，如果您移出样本，将突出显示所选图像。我在代码中遗漏了什么？我怎样才能实现它。任何参考链接也会有所帮助。我是网络开发的新手。
<div class="container">
<div class="col-md-12 ">
<div class="col-md-4 single_left pull-left left">
<div class="flexslider">
<ul>
<li>
<img id="image3" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image" class="etalage_source_image" src="images/4.jpg" />
</li>
<li>
<img id="image1" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image4" class="etalage_source_image" src="images/5.jpg" />
</li>
<li>
<img id="image2" class="etalage_thumb_image" src="images/4.jpg" />
<img id="image5" class="etalage_source_image" src="images/6.jpg" />
</li>
</ul>
</div>
<script defer src="assets/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<div class="caption ">
<div id="name"><small><strong>Zoya 1 </strong></small></div>
<div id="price"><strong>Zoya123</strong></div>
</div>
<div>
<asp:Label ID="Label1" runat="server" Text="SELECTED" Style="color: red; font: bold"></asp:Label>
<asp:Image ID="imgselected" runat="server" src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' Width="300" Height="250" alt="" />
<br />
<strong>
<asp:Label ID="ItemCode" runat="server" Text=""></asp:Label>
</strong>
<br />
<strong>
<asp:Label ID="lblPrice" runat="server" Text=""></asp:Label>
</strong>
<br />
<p>
<small><strong>
<asp:Label ID="lblDesc" runat="server" Text=""></asp:Label>
</strong></small>
<br />
<asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
<small>
<asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
</small>
<br />
</p>
<asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
<asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
<script>
// Can also be used with $(document).ready()
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails"
});
});
</script>
</div>
</div>
<div class="col-md-8 single-top-in simpleCart_shelfItem">
<div>
<img id="img" src="assets/products/1_ZP244.jpg" />
</div>
<div class="clearfix"></div>
<div style="align-content: center">
<strong>CLICK THE IMAGE TO SELECT </strong>
</div>
<asp:ListView ID="ImagesList" runat="server"
DataKeyNames="ID"
GroupItemCount="14"
OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" class="data" OnSelectedIndexChanged="OnSelectedIndexChanged">
<EmptyDataTemplate>
No Images found.
</EmptyDataTemplate>
<LayoutTemplate>
<table>
<tr runat="server" id="groupPlaceholder" />
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<td runat="server" id="itemPlaceholder" />
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<div class="data" data-image='<%#"assets/products/"+Eval("ImageUrl").ToString() %>'
data-name='<%# Eval("Description") %>' data-price='<%# Eval("Price") %>'
data-image1='<%#"assets/products/1_"+Eval("ImageUrl").ToString() %>'
data-image2='<%#"assets/products/2_"+Eval("ImageUrl").ToString() %>'>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="myButton"
CommandName="Change"
OnCommand="btnDetails_Command"
CommandArgument='<%# Eval("Notes") %>'>
<img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="width: 50px; height: 50px" alt="Change" onclick='' /></asp:LinkButton>
</div>
</td>
</ItemTemplate>
</asp:ListView>
</div>
<div class="clearfix"></div>
<!---->
</div>
<script>
$(".data").mouseover(function () {
var image = $(this).attr('data-image');
var image1 = $(this).attr('data-image1');
var image2 = $(this).attr('data-image2');
var image3 = $(this).attr('data-image');
var image4 = $(this).attr('data-image1');
var image5 = $(this).attr('data-image2');
var name = $(this).attr('data-name');
var price = $(this).attr('data-price');
$(".left").find('#image').attr('src', image);
$(".left").find('#image1').attr('src', image1);
$(".left").find('#image2').attr('src', image2);
$(".left").find('#image3').attr('src', image3);
$(".left").find('#image4').attr('src', image4);
$(".left").find('#image5').attr('src', image5);
$(".left").find('#name').text(name);
$(".left").find('#price').text(price);
})
</script>
<div class="clearfix"></div>
</div>
答案 0 :(得分：1)
欢迎使用前端Web开发！这是JavaScript的一个很好的用例。有多种方法可以解决此问题。这是一种快速而肮脏的方式，也是一种难以编码但非常有效的方式。由于您是JavaScript的新手，我会向您展示快速而肮脏的方式。一旦掌握了JavaScript对象的概念并操纵DOM，您可能会想出更复杂的方法（使用后端的JSON API异步加载数据，将结果存储在JavaScript对象中，然后添加事件监听器来制作页面会响应您的点击次数并显示正确的项目。）
快速而肮脏的方式：https://codepen.io/krabbypattified/pen/vmpyjK
JavaScript基本上说“为每个项目选择器添加一个点击监听器，说明：当您点击我时，找到class="item"的所有元素，如果其id与我的{{{1}匹配1}}，显示它。否则，隐藏它。“