堆棧內存溢出
  簡體   English   中英

多個圖像具有相同的onclick功能

[英]same onclick function for multple images

 原文  2017-04-09 22:08:49  0   3    javascript/ jquery/ html/ asp.net

問題描述

我正在處理一個小的圖像庫，有些頁面最多包含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>

謝謝你，任何幫助將不勝感激

3 個解決方案

解決方案1
 2  2017-04-09 22:15:47

  1. 對所有圖像使用通用類，並將點擊偵聽器設置為類。
  2. 將索引附加到文件名以獲取映射的圖像。

請參見下面的示例並相應地實施。 在這里，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";
    });
}

解決方案2
 0 已采納  2017-04-09 22:20:16

只需在單個事件處理程序中更改"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');
        }
   });       
});

添加普通類和切換一個big類或類似的每一個還有助於簡化此進一步

解決方案3
 0  2017-04-09 22:26:29

關鍵是您可以對所有圖像重用事件處理程序，這將顯着降低內存消耗並提高代碼可維護性。

嘗試這樣的事情： 

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);
})

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Onclick與同一個類別執行動作多個href 同一個onclick js函數用於多個圖像 如何使onclick功能在同一個div中創建圖像？ 對不同的圖像重復onclick功能 動作和功能點擊相同按鈕 2 個動作鏈接到同一個 onClick 函數 在同一個函數中停止 onclick() 事件 jQuery序列化函數與多種形式 如何將OnClick函數綁定到Javascript中的圖像列表 使用 onclick function 更改圖像，但它不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM