Множество одинаковых кнопок и (свернутых) элементов div на одной странице. Как использовать Jquery, чтобы каждая кнопка расширяла соответствующий div?

avatar
Bob
8 апреля 2018 в 02:00
41
2
0

html:

<button class='expandotron'></button>
<div class='detail-view'></div>
<button class='expandotron'></button>
<div class='detail-view'></div>
<button class='expand'></button>
<div class='detail-view'></div>

jquery:

$('.expandotron').click(function() {
    if($( ".detail-view" ).css('display') != 'none'){
         $( ".detail-view" ).css('display', 'none');
         $( ".fixed-table-body" ).css('height', '0px'); // ignore this line
         $( ".table-pad ").css('padding', '0px'); // ignore this line
      } else {
         $( ".detail-view" ).css('display', 'table-row');
         $( ".fixed-table-body" ).css('height', 'auto'); //ignore this line
         $( ".table-pad" ).css('padding', '12px'); // ignore this line
      }

Это просто связывает все кнопки со всеми div

Источник
cjl750
8 апреля 2018 в 02:03
0

Итак, при чем тут элементы с классами fixed-table-body и table-pad? И должна ли каждая кнопка воздействовать на div detail-view сразу после нее, или она должна работать как-то иначе?

ggorlen
8 апреля 2018 в 02:07
0

Похоже, вы хотите использовать идентификаторы для уникальной идентификации каждого элемента. Классы или просмотр положения узла в дереве DOM можно было бы заставить работать, но это было бы ненадежно.

Ответы (2)

avatar
Bob
8 апреля 2018 в 06:25
0

Спасибо за ваш вклад, ребята :) В итоге я использовал это:

 $( ".expandotron" ).each(function( index, element ) {

       $(element).click(function(){
           if( $( ".detail-view:eq("+String(index)+")" ).css('display') == 'none'){
            $( ".detail-view:eq("+String(index)+")" ).css('display', 'table-row');
            $( ".fixed-table-body:eq("+String(index)+")").css('height', 'auto');
            $( ".table-pad:eq("+String(index)+")" ).css('padding', '12px');
        } else {
            $( ".detail-view:eq("+String(index)+")" ).css('display', 'none');
            $( ".fixed-table-body:eq("+String(index)+")").css('height', '0');
            $( ".table-pad:eq("+String(index)+")" ).css('padding', '0px');
        }
      }); 

    });
avatar
Matthew Schlachter
8 апреля 2018 в 02:23
1

Вы можете использовать селектор jQuery next, чтобы найти следующий элемент, соответствующий определенным критериям. Например, чтобы получить следующий div с классом detail-view, вы можете использовать $(this).next( ".detail-view" ) и так далее внутри вашего события click, так что ваш окончательный код jQuery будет выглядеть примерно так: 

$('.expandotron').click(function() {
    if($(this).next( ".detail-view" ).css('display') != 'none'){
         $(this).next( ".detail-view" ).css('display', 'none');
         $(this).next( ".fixed-table-body" ).css('height', '0px');
         $(this).next( ".table-pad ").css('padding', '0px');
      } else {
         $(this).next( ".detail-view" ).css('display', 'table-row');
         $(this).next( ".fixed-table-body" ).css('height', 'auto');
         $(this).next( ".table-pad" ).css('padding', '12px');
      }
});