Нужно сократить мой 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 UI):

$(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

Это должно быть достаточно

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

this.id хорошее использование которого является идентификатор текущего элемента, щелкнули.

Замените его б и toggleClass для этого ..