单击显示弹出窗口

卡雷尔

我有一个包含BookList的MVC 5应用程序。在剃须刀视图中,通过将ISBN发送到亚马逊来显示每本书的封面:

<img id="@item._id" class="img img-responsive img-thumbnail" style="max-width: 110px" [email protected]("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" [email protected]("http://images.amazon.com/images/P/{0}", @item.isbn)>
</div>

我面临的问题是单击图像,该类将应用于.img列表中的所有图像,并显示所有放大的封面。我需要以某种方式识别单击的特定图像。我认为可以通过$(this)来实现,但显然不能实现。

肖恩·昂

您现在遇到的问题是因为$(this)引用了所有具有.img类的元素。因此,您没有针对调用click事件的元素。

尝试以下代码,让我知道它是否有效。

$(".img").click(function (evt) {
    var clicked = evt.target.id;
    if ( $('#' + clicked).hasClass("selected") ) {
       deselect();
    } else {
       $('#' + clicked).addClass("selected");
       $('.pop #' + clicked).parent().slideFadeToggle();
    }
    return false;
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章