Question

我正在处理一个小图库，有些页面最多有100张图像。当您打开页面时，您会看到小图像，当它们被单击时，将从特定文件夹中打开一个新的更高分辨率的图像。是否可以通过一次单击功能或使用少量代码的方式实现。我只是不想为每个图像使用几个不同的onclick函数，这将花费很多时间。

以下是我的标记和javascript代码

标记

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <link href="../App_Themes/Gallery/Gallery.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
<div id="images">
            <asp:Image ID="Image1" CssClass="Image1" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery1_Small.jpg" />
            <asp:Image ID="Image2" CssClass="Image2" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery2_Small.jpg" />
            <asp:Image ID="Image3" CssClass="Image3" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery3_Small.jpg" />
            <asp:Image ID="Image4" CssClass="Image4" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery4_Small.jpg" />
            <asp:Image ID="Image5" CssClass="Image5" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery5_Small.jpg" />
            <asp:Image ID="Image6" CssClass="Image6" hspace="25" vspace ="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery6_Small.jpg" />
            <asp:Image ID="Image7" CssClass="Image7" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery7_Small.jpg" />
            <asp:Image ID="Image8" CssClass="Image8" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery8_Small.jpg" />
            <asp:Image ID="Image9" CssClass="Image9" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery9_Small.jpg" />
            <asp:Image ID="Image10" CssClass="Image10" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery10_Small.jpg" />
            <asp:Image ID="Image11" CssClass="Image11" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery11_Small.jpg" />
            <asp:Image ID="Image12" CssClass="Image12" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery12_Small.jpg" />
            <asp:Image ID="Image13" CssClass="Image13" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery13_Small.jpg" />
            <asp:Image ID="Image14" CssClass="Image14" hspace="25" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery14_Small.jpg" />
            <asp:Image ID="Image15" CssClass="Image15" hspace="25" vspace="15" runat="server" ImageUrl="~/App_Themes/Gallery/HomeImages/Small_Images/Gallery15_Small.jpg" />
   </div>
        </ContentTemplate>
        </asp:UpdatePanel>

Javascript代码

<script type="text/javascript">
     $(".Image1").click(function () {
         $(".Image1").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery1_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery1_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery1_Big.jpg";
         });    
         //$("#images:not(.Image1)").hide();
         //$('.Image1').appendTo('body');
         //$('.Image1').css("margin-left", "450px");
     });
     $(".Image2").click(function () {
         $(".Image2").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery2_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery2_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery2_Big.jpg";
         });
     });
     $(".Image3").click(function () {
         $(".Image3").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery3_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery3_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery3_Big.jpg";
         });
     });
     $(".Image4").click(function () {
         $(".Image4").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery4_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery4_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery4_Big.jpg";
         });
     });
     $(".Image5").click(function () {
         $(".Image5").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery5_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery5_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery5_Big.jpg";
         });
     });
     $(".Image6").click(function () {
         $(".Image6").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery6_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery6_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery6_Big.jpg";
         });
     });
     $(".Image7").click(function () {
         $(".Image7").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery7_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery7_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery7_Big.jpg";
         });
     });
     $(".Image8").click(function () {
         $(".Image8").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery8_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery8_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery8_Big.jpg";
         });
     });
     $(".Image9").click(function () {
         $(".Image9").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery9_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery9_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery9_Big.jpg";
         });
     });
     $(".Image10").click(function () {
         $(".Image10").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery10_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery10_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery10_Big.jpg";
         });
     });
     $(".Image11").click(function () {
         $(".Image11").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery11_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery11_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery11_Big.jpg";
         });
     });
     $(".Image12").click(function () {
         $(".Image12").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery12_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery12_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery12_Big.jpg";
         });
     });
     $(".Image13").click(function () {
         $(".Image13").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery13_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery13_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery13_Big.jpg";
         });
     });
     $(".Image14").click(function () {
         $(".Image14").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery14_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery14_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery14_Big.jpg";
         });
     });
     $(".Image15").click(function () {
         $(".Image15").attr("src", function (index, currentSource) {
             return currentSource == "../App_Themes/Gallery/HomeImages/Big_Images/Gallery15_Big.jpg"
                 ? "../App_Themes/Gallery/HomeImages/Small_Images/Gallery15_Small.jpg"
                 : "../App_Themes/Gallery/HomeImages/Big_Images/Gallery15_Big.jpg";
         });
     });
 </script>

感谢您的帮助，我们将不胜感激

Answer 1

对所有图像使用公共类，并将点击侦听器设置为类。
将索引附加到您的文件名以获取映射图像。

参见下面的示例并相应地实施。这里testImage是所有图像的通用类。

$(".testImage").click(imageClick);

function imageClick(event) {
    $(event.target).attr("src", function (index, currentSource) {
        return currentSource == ($('.testImage').index(this) + 1) + ".png"
                 ? ($('.testImage').index(this) + 1) + "_small.png"
                 : ($('.testImage').index(this) + 1) + ".png";
    });
}

Answer 2

只需在单个事件处理程序中更改DF和"Big.jpg"以及目录名称

类似的东西：

"Small.jpg"

添加公共类并在每个类上切换$('#images img').click(function(){ $(this).attr('src', function(i, existSrc){ if(existSrc.indexOf('Big.jpg') >-1){ return existSrc.replace('Big.jpg','Small.jpg') .replace('Big_Images','Small_Images'); }else{ return existSrc.replace('Small.jpg','Big.jpg'); .replace('Small_Images','Big_Images'); } }); });类或类似内容也有助于进一步简化此类

Answer 3

重点是您可以为所有图像重用事件处理程序，这将显着降低内存消耗并提高代码可维护性。

尝试这样的事情：

var images = /* an array holding all your img elements */    
var handler = function(event) {
        $(event.target).attr("src", function (index, currentSource) {
            var sn = event.target.id.match(/Image(\d+)/)[1];
            var small = "../App_Themes/Gallery/HomeImages/Small_Images/Gallery" + sn + "_Small.jpg";
            var big = "../App_Themes/Gallery/HomeImages/Big_Images/Gallery" + sn + "_Big.jpg";
            return (currentSource === small 
            ? big
            : small);
        });
};

images.forEach(function(image) {
    image.click(handler);
})

多个图像的相同onclick功能

3 个答案: