单击时显示带有图像的弹出窗口

Question

我有一个包含 BookList 的 MVC 5 应用程序。在剃刀视图中，通过将 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) 来实现，但显然不是。

Answer 1

您现在遇到的问题是因为 $(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;
});