需要縮短我的JQuery UI JS

Question

我正在研究一個項目，裏面是一個帶縮略圖的手風琴，當你點擊一個圖片時，手風琴旁邊會出現一張圖片。到目前爲止，我已經成功地得到它使用下面的代碼工作：

HTML：

<!--thumbs---> 
<a id="1a" href="#"><img src="../../images/thumb/1000.jpg" /></a> 
<a id="2a" href="#"><img src="../../images/thumb/1001.jpg" /></a> 
<a id="3a" href="#"><img src="../../images/thumb/1002.jpg" /></a> 
<a id="4a" href="#"><img src="../../images/thumb/1003.jpg" /></a> 
<a id="5a" href="#"><img src="../../images/thumb/1004.jpg" /></a> 
<a id="6a" href="#"><img src="../../images/thumb/1005.jpg" /></a> 
<!--large photos---> 
<img class="hide1" id="1b" src="../../images/fullsize/1000.jpg" /> 
<img class="hide1" id="2b" src="../../images/fullsize/1001.jpg" /> 
<img class="hide1" id="3b" src="../../images/fullsize/1002.jpg" /> 
<img class="hide1" id="4b" src="../../images/fullsize/1003.jpg" /> 
<img class="hide1" id="5b" src="../../images/fullsize/1004.jpg" /> 
<img class="hide1" id="6b" src="../../images/fullsize/1005.jpg" /> 

CSS：

.hide1{ 
    display:none; 
} 
.show{ 
    display:block !important; 
} 

和JS（下jQuery用戶界面）：

$(function() { 
$("#1a").click(function() { 
     $(".show").toggleClass("show", 0); 
     return false; 
}); 
$("#1a").click(function() { 
    $("#1b").toggleClass("show", 0); 
    return false; 
}); 


$("#2a").click(function() { 
    $(".show").toggleClass("show", 0); 
    return false; 
}); 
$("#2a").click(function() { 
    $("#2b").toggleClass("show", 0); 
    return false; 
}); 


$("#3a").click(function() { 
    $(".show").toggleClass("show", 0); 
    return false; 
}); 
$("#3a").click(function() { 
    $("#3b").toggleClass("show", 0); 
    return false; 
}); 


$("#4a").click(function() { 
    $(".show").toggleClass("show", 0); 
    return false; 
}); 
$("#4a").click(function() { 
    $("#4b").toggleClass("show", 0); 
    return false; 
}); 


$("#5a").click(function() { 
    $(".show").toggleClass("show", 0); 
    return false; 
}); 
$("#5a").click(function() { 
    $("#5b").toggleClass("show", 0); 
    return false; 
}); 
}); 

有沒有人知道我可以縮短JS的方法？我有超過100張照片，除非必須，否則不要特意爲他們做這些。

Answer 1

給的鏈接的類：

<a id="1a" href="#" class="ThumbClick"> 

然後應用帶班和利用這一點擊：

$('.ThumbClick').click(function(){ 
    var $id = this.id.replace('a','b'); 

    $('.show,#'+$id).toggleClass('show',0); 
    return false; 
}); 

既然你'重新切換您顯示的同一班級，可以將其整合到逗號分隔的選擇器中。該類和this.id的使用使該功能通用，但特定於鏈接點擊。

Here is a working jsFiddle based on this logic。

圖片尚未明顯上傳，但在Chrome開發人員工具中，您可以看到相應的圖層類別適合於圖片。如果你想繼續冒泡但阻止鏈接操作：

$('.ThumbClick').click(function(e){ 
    var $id = this.id.replace('a','b'); 

    e.preventDefault(); 
    $('.show,#'+$id).toggleClass('show',0); 
}); 

只是提供它作爲一種替代，要麼應該工作正常。 Here is the jsFiddle for that logic。

Answer 2

這應該是使用this.id這是被點擊當前元素的id足夠

$(function() { 
    $("#1a , #2a, #3a, #4a, #5a").on('click', function() { 
     var newId = this.id.replace('a', 'b'); 

     $('#' + newId).toggleClass("show", 0); 
     $(".show").toggleClass("show", 0); 
     return false; 
    }); 
}); 

好。

與B和toggleClass爲替換它..