как запускать ID один за другим

frist проверить это http://jsfiddle.net/jQFWM .. это работает отлично. но я не хочукак запускать ID один за другим

$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $("#panel-1").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 

    $(".btn-slide2").click(function(){ 
     $("#panel-2").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 
    $(".btn-slide3").click(function(){ 
     $("#panel-3").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 
});

напишите вот так. потому что я не хочу повторять тот же код снова и снова. также в будущем эта панель и тигринг будут динамичными, поэтому их будет больше 3. Так что на мой взгляд, если я могу вызвать это, позвонив по номеру, например, 1, 2, 3 и т. д., тогда код может быть небольшим, я думаю. так что ребята какая-нибудь идея как? например $ ("# panel + number")

http://jsfiddle.net/jQFWM/1 этот короткий код, но не работает.

источник

2013-06-12 Accore LTD

, что я хотел бы предложить, дает всегда один и тот же класс этой кнопке. Затем добавьте событие click в этот класс, и в этом случае вы можете переключить класс на кнопку с помощью «this» и найти родительскую панель, используя функции jquery traversing; Таким образом, вам не нужно иметь дело с цифрами и так ... –

Вот что я хотел бы сделать:

JS:

$(".combtn a").click(function (e) { 
    e.preventDefault(); 
    $("#panel-" + $(this).data('panel')).slideToggle("slow"); 
    $(this).toggleClass("active"); 
}); 

$('.btn-slide').click(function (e) { 
    e.preventDefault(); 
    $(this).closest('.panbox').slideToggle("slow"); 
    $(".combtn a").removeClass("active"); 
});

HTML:

<div class="combtn"><a href="#" data-panel="1">panel 1</a> 
<div class="combtn"><a href="#" data-panel="2">panel 2</a> 
<div class="combtn"><a href="#" data-panel="3">panel 3</a>

панель Закрыть:

<a href="#" class="btn-slide">close</a>

Это использует атрибут data-* для хранения номера панели. Я также упростил классы, чтобы вам не приходилось добавлять дополнительные события или имена классов для каждой добавляемой вами панели.

Здесь работает: http://jsfiddle.net/jQFWM/2/

источник

2013-06-12 16:01:38 Joe

классный ... работающий тоже хорошо. –

вы можете привести аргументы в вашу функцию захватить их в глобальной переменной:

<a class="btn-slide1" href="#" onclick="toggler('panel-1');">Click me for 1</a> 
<a class="btn-slide2" href="#" onclick="toggler('panel-2');">Click me for 2</a> 
<a class="btn-slide3" href="#" onclick="toggler('panel-3');">Click me for 3</a>

и написать функцию:

var currentpanel; 
function toggler(e){ 
    currentpanel = $('#'+e); 
    currentpanel.slideToggle("slow"); 
    currentpanel.toggleClass("active"); 
    return false; 
});

источник

2013-06-12 15:50:32 supersize

Это решение не требует никаких идентификаторов или числовых ссылок. Элементы связаны родительским и дочерним, а не жестко закодированными идентификаторами.

Demo

HTML:

<div class="combtn"><a href="#" class="btn-slide">panel 1</a> 
    <div id="panel-1" class="panbox"> testing panle 1 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div> 

<div class="combtn"><a href="#" class="btn-slide">panel 2</a> 
    <div id="panel-2" class="panbox"> testing panle 2 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div> 

<div class="combtn"><a href="#" class="btn-slide">panel 3</a> 
    <div id="panel-3" class="panbox"> testing panle 3 
     <p><a href="#" class="btn-slide close">close</a></p> 
    </div> 
</div>

Javascript:

$(document).ready(function(){ 
    $(".btn-slide").click(function(){ 
     $(this).parents('.combtn').find('.panbox').slideToggle("slow"); 
     $(this).toggleClass("active"); 
     return false; 
    }); 
});

источник

2013-06-12 16:04:00 MrCode

да хорошо, что он работает хорошо –

как запускать ID один за другим

ответ

Смежные вопросы