смехотворно простое JQuery многоразовой функция вопрос

Question

Действительно быстрый JQuery вопрос ...

У меня есть эта функция:

$(document).ready(function() { 

    $('a#show1').click(function() { 
    $('.item1').toggle(1000); 
    return false; 
    }); 

    $('a#show2').click(function() { 
    $('.item2').toggle(1000); 
    return false; 
    }); 

    // And it goes on... 
}); 

страница скрипт работает на есть любое количество show и item дивов, все уникальны и идентифицировано как itemX

Как я могу переписать неоднократные и одинаковые функции для show1 и show2 так, что он заканчивает тем, что, по существу, как это:

$('a#showX').click(function() { 
    $('.itemX').toggle(1000); 
    return false; 
}); 

Answer 1

$("a[id^=show]").click(function(){ 
var id = $(this).attr("id"); 
var num = id.substring(4); 
$(".item" + num).toggle(1000); 
}); 

Я надеюсь, что это работает, я не проверял.

Answer 2

Если вы знаете, сколько у вас есть, вы можете просто использовать цикл for и добавить переменную.

for(var i=1;i<=whatever;i++) 
{ 
    $('a#show' + i).click(function() { // ... etc ... // }); 
} 

Answer 3

Это идея:

$('a#show1', 'a#show2').click(function() { 
    id = ".item" + this.id.substr(4); 
    $(id).toggle(1000); 
    return false; 
}); 

Answer 4

$('a[id^=show]').click(function() { 
    var id = $(this).attr('id'); 
    id = id.substring(id.length-1); 
    $('.item'+id).toggle(1000); 
    return false; 
}); 

Answer 5

Я обычно стараюсь держать детали в последовательно относительных позиций в DOM:

//all <a> with class .show-extra 
$('a.show-extra').click(function() { 
    //get the next element with the class .show-extra-panel 
    $(this).next('.show-extra-panel').toggle(1000); 
    return false; 
}); 

Это сделало бы что-нибудь вроде этой работы:

<a href="#" class="format-link show-extra">text</a> 
<div class="info-panel show-extra-panel">extra toggle text</div> 

Answer 6

@usoban имеет правильный подход - синтаксис «начинается с» в первом селекторе найдет все элементы «шоу», независимо от того, сколько их там. Вам просто нужно настроить код так, чтобы он извлекал только цифровую часть «id», а только используя все это, или он будет искать элементы с классом «.itemshow1» вместо «.item1».

$("a[id^=show]").click(function(){ 
    $(".item" + this.attr("id").substr(4)).toggle(1000); 
}); 

EDIT @Keith также имеет хороший подход - используя класс, чтобы отметить элементы «шоу» - так, что числовая часть идентификатора не требуется - а затем, опираясь на относительное положение ' item ', чтобы найти его.