我有一个包含 BookList 的 MVC 5 应用程序。在 Razor View 中,通过将 ISBN 发送到亚马逊来显示每本书的封面:
<img id="@item._id" class="img img-responsive img-thumbnail" style="max-width: 110px" src=@string.Format("http://images.amazon.com/images/P/{0}.01.mzzzzzzz", @item.isbn)>
这些图像在 foreach
循环中偏离路线:
@foreach (var item in Model) {...}
我想做的是,使用 jquery,在弹出窗口中显示封面的放大版本。为此,我一直在关注我在网上某处找到的解决方案。为了使点击起作用,我使用了分配给图像的类:
$(".img").click(function () {
if ($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$(".pop").slideFadeToggle(function () {
});
}
return false;
});
在此函数中应用或删除一个 css 类,它将显示或隐藏包含放大图像的 div:
<div class="messagepop pop">
<img id="@item._id" class="img" src=@string.Format("http://images.amazon.com/images/P/{0}", @item.isbn)>
</div>
我面临的问题是,单击图像时,该类将应用于列表中带有 .img
的所有图像,并显示所有放大的封面。我需要以某种方式识别被点击的特定图像。我认为这将通过 $(this) 实现,但显然不是。
最佳答案
您现在遇到的问题是因为 $(this) 引用了所有具有 .img 类的元素。因此,您没有针对调用点击事件的元素。
试试下面的代码,如果有效请告诉我。
$(".img").click(function (evt) {
var clicked = evt.target.id;
if ( $('#' + clicked).hasClass("selected") ) {
deselect();
} else {
$('#' + clicked).addClass("selected");
$('.pop #' + clicked).parent().slideFadeToggle();
}
return false;
});
关于jquery - 单击显示带有图像的弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24302082/