Как петля функции на все мои кнопки в JQuery

-hello Кто-то будет так добры, чтобы помочь мне, правда не нравится делать эти избыточные строки кода можно уменьшить, например:Как петля функции на все мои кнопки в JQuery

У меня есть кнопка с функцией;

$(".btn1").click(function() { 
    $(".1").show(); 

    $(".2").hide(); 
});

Так много идет хорошо, но у меня много кнопок со схожими функциями.

$(".btn2").click(function() { 
    $(".2").show(); 

    $(".1").hide(); 
    $(".3").hide(); 
    $(".4").hide(); // Etc 
});

кто-то, кто мне поможет!

Cheers.

---------------- МОЯ HTML

<section class="menu" id='menus'> 

         <ul> 
          <li class='btn1' >HTML</li> 
          <li class='btn2' >CSS</li> 
          <li class='btn3' >JQUERY</li> 
          <li class='btn4' >JAVA</li> 
          <li class='btn5' >PHP</li> 
          <li class='btn6' >SQL</li> 

         </ul> 
</section> 


<div class="contenedor"> 

       <div class="contenido" > 


        <div class="boxinfo 1" > 
         <div > Example of content 1</div> 
        </div> 

        <div class="boxinfo 2" > 
         <div > Example of content 2</div> 
        </div> 

        <div class="boxinfo 3" > 
         <div > Example of content 3</div> 
        </div> 

        <div class="boxinfo 4" > 
         <div > Example of content 4</div> 
        </div> 

        <div class="boxinfo 5" > 
         <div > Example of content 5</div> 
        </div> 

        <div class="boxinfo 6" > 
         <div > Example of content 6</div> 
        </div> 


       </div> 
</div>

Я надеюсь, что вы меня понимаете помочь

источник

2015-11-26 Abrajam Avila

показать нам свой HTML – mwl

если кнопки на том же уровне, попробуйте что-то вроде этого '$ ('. 1'). show(). siblings(). hide();' – mwl

Это работает, если я помещаю каждую функцию, но я стараюсь избегать. С уважением. –

JQuery:

$('.btn').on('click', function() { 
    var showAttr = $(this).attr('data-show'); 
    $('.boxinfo.' + showAttr).show().siblings().hide(); 
});

HTML:

<section class="menu" id='menus'> 
    <ul> 
     <li class="btn" data-show="1">HTML</li> 
     <li class="btn" data-show="2">CSS</li> 
     <li class="btn" data-show="3">JQUERY</li> 
     <li class="btn" data-show="4">JAVA</li> 
     <li class="btn" data-show="5">PHP</li> 
     <li class="btn" data-show="6">SQL</li> 
    </ul> 
</section>

работает пример на jsFidle: http://jsfiddle.net/2qyh9q5s/

источник

2015-11-26 21:55:18 mwl

Спасибо, г-н настоящий гений !!! :) ты сделал мне очень счастливый день! –

работы с идентификаторами и классами.
все элементы, которые должны быть скрыты могут быть скрыты с помощью одной команды, если у них есть все тот же класс

$('.hide-all-this-elements').hide();

простой CSS Selector.

Работа с данными Attribtues. этот атрибут данных имеет идентификатор от элемента.

<button class="btn2" data-show="#elm-2"> 

<div id="elm-2"> 

$('.btn2').click(function() { $( $(this).data('show')).show() ...

[EDIT] заменил отказ

источник

2015-11-26 18:20:04 Chris

Как петля функции на все мои кнопки в JQuery

ответ

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