Question

我的网站上有一个带有多个图像的小图库，我试图让每个图像都可以点击，当点击一个图像时，图像会增加，而其他图像会消失。我知道如何做到这一点，但我不希望每个图像有一千个点击功能，如果这是有道理的。

以下是我的图片JavaScript代码

         $("#images").click(function (e) {
             $("#images img").css({ width: "0px", height: "0px"});
             e.target.style.width = "400px";
             e.target.style.height = "400px";
             $("#images").stop();
         });

这是包含在div元素中的图像的标记。有更多的图像只是不想把它们全部放在这里

<div id="images">
            <asp:Image ID="Image1" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery1_Small.jpg" />
            <asp:Image ID="Image2" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery2_Small.jpg" />
            <asp:Image ID="Image3" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery3_Small.jpg" />
            <asp:Image ID="Image4" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery4_Small.jpg" />
            <asp:Image ID="Image5" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery5_Small.jpg" />
            <asp:Image ID="Image6" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery6_Small.jpg" />
            <asp:Image ID="Image7" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery7_Small.jpg" />
            <br />
            <br />
            <asp:Image ID="Image8" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery8_Small.jpg" />
            <asp:Image ID="Image9" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery9_Small.jpg" />
            <asp:Image ID="Image10" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery10_Small.jpg" />
            <asp:Image ID="Image11" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery11_Small.jpg" />
            <asp:Image ID="Image12" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery12_Small.jpg" />
            <asp:Image ID="Image13" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery13_Small.jpg" />
            <asp:Image ID="Image14" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery14_Small.jpg" />
            <asp:Image ID="Image15" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery15_Small.jpg" />
   </div>

#images
{
    position: absolute;
    top: 165px;
    margin-right: -50000px;
}

这是我正在处理的http://portfoliobrown.com/Gallery/GalleryHome.aspx的链接所以我只是想能够点击一个图像，其中点击的图像在页面中间增加了大小，其他图像消失了。

非常感谢任何帮助

Answer 1

您可以使用事件委派。将click事件绑定到包装器div，然后使用e.target识别正在使用的特定图像。

$("#images").click(function(e){
    // Reset the other image styles here. Doesn't really make sense to
    // hide them completely though or you will have nothing to click!
    $("#images img").css({width: "50px", height: "40px"});

    // Apply styles to the clicked image.
    e.target.style.width = "500px";
    e.target.style.height = "400px";
});

Answer 2

由于您正在使用Jquery，因此您应该使用this（快速找到此引用，您可能会更好）。

我还创建了一个fiddle供您查看。它非常简单，但您需要做的就是为图像标记添加一个类，这样您就可以使用选择器捕获onclick事件。

$('.image').on('click', function(){
  $(this).height('100px');
  $(this).width('100px');
});

显然，这不能处理已经放大的图像，但是我会把它留给你玩。如果要加载更高分辨率的图像，则扩展高度和宽度属性可能不是最佳选择。您必须有一些方法将您单击的每个图像耦合到该图像的更高分辨率（自定义属性，如data-id或类似的东西）。

对于您的onclick功能，您可以add another class为其他图片设置display: none样式。这会隐藏他们。当用户离开较大的图像时，您只需要remove the class。

无论如何，希望这会有所帮助。

多个图像可点击javascript，jquery

2 个答案: