凝聚Javascript/jQuery代碼

我想首先感謝任何能夠幫助我壓縮這段Javascript/jQuery代碼的人。凝聚Javascript/jQuery代碼

 jQuery(function() { 

      jQuery('#pitem-1').click(function(e) { 
       jQuery("#image-1").lightbox_me({centered: true, onLoad: function() { 
        jQuery("#image-1").find("input:first").focus(); 
       }}); 

       e.preventDefault(); 
      });   

      jQuery('#pitem-2').click(function(e) { 
       jQuery("#image-2").lightbox_me({centered: true, onLoad: function() { 
        jQuery("#image-2").find("input:first").focus(); 
       }}); 

       e.preventDefault(); 
      }); 

      jQuery('#pitem-3').click(function(e) { 
       jQuery("#image-3").lightbox_me({centered: true, onLoad: function() { 
        jQuery("#image-3").find("input:first").focus(); 
       }}); 

       e.preventDefault(); 
      }); 

      jQuery('table tr:nth-child(even)').addClass('stripe'); 
     });

基本上每個＃pitem-ID在彈出窗口中打開相同的＃圖像ID。

再次感謝任何可以幫助的人。

傑克

來源

2012-04-28 Jack Clarke

是什麼阻止你使用一個循環？ – Claudiu 2012-04-28 00:56:48

首先用$替換jQuery。 – alt 2012-04-28 00:58:15

我使用jQuery而不是$來防止與Prototype衝突。 – 2012-04-28 11:49:21

$('[id^="pitem-"]').click(function(e) { 
    var numb = this.id.split('-')[1]; 
    $("#image-"+numb).lightbox_me({centered: true, onLoad: function() { 
     $(this).find("input:first").focus(); 
    } 
    }); 
    e.preventDefault(); 
});   

$('table tr:nth-child(even)').addClass('stripe');

來源

2012-04-28 01:06:15 adeneo

這就是我所追求的。它適用於ID爲1,2,3的前3項，然後我跳到項目50並且不起作用。任何想法爲什麼？編輯：它不適用於9以上的任何ID（雙數字） - 是否有可能改變這種情況？ – 2012-04-28 08:59:28

@JackClarke - 我的答案更新了兩位數字，實際上它會在'-'後面的任何數字！ – adeneo 2012-04-28 10:21:20

你的功能看起來都大同小異的，這是你應該移到這個功能出來弄成一個線索，可以稱之爲：

function createHandler(id) { 
    return function (e) { 
     $(id).lightbox_me({centered: true, onLoad: function() { 
      $(id).find("input:first").focus(); 
     }}); 

     e.preventDefault(); 
    } 
};

然後你可以使用：

$('#pitem-2').bind('click', createHandler("#image-2"));

來源

2012-04-28 00:58:50 pbeardshear

yay部分應用 – 2012-04-28 01:16:41

但是，這仍然重複安裝事件處理程序三次的代碼，而不是創建處理所有三個對象的單個事件處理程序（請參閱其他答案）。 – jfriend00 2012-04-28 03:01:05

沒有上下文很難說，但是每個pitem有必要有一個唯一的ID嗎？爲什麼不使用CSS類，而不是一個ID像這樣：

<div class="pitem"> 
<div id="image1"><img ... /></img> 
</div> 
... 
<div class="pitem"> 
<div id="image3"><img ... /></img> 
</div>

然後在jQuery的使用類選擇對所有這些一次添加的點擊功能：

$(".pitem").click(function(e) { 
    var currentItem = e.target; 
    ... 
    e.preventDefault(); 
});

來源

2012-04-28 01:01:25

你可以：

將多個對象到選擇與一個共同的事件處理程序
使用this來引用觸發事件的對象
從生成事件的對象的id導出圖像ID。

，讓您使用一段代碼來處理所有三個對象的動作：

jQuery(function() { 
    jQuery("#pitem-1, #pitem-2, #pitem-3").click(function() { 
     var image$ = $("#" + this.id.replace("pitem", "image")); 
     image$.lighbox_me({centered: true, onLoad: function() { 
        image$.find("input:first").focus(); 
     }}); 
     e.preventDefault(); 
    }); 
    jQuery('table tr:nth-child(even)').addClass('stripe'); 
});

來源

2012-04-28 01:22:02 jfriend00

凝聚Javascript/jQuery代碼

回答

相關問題