Как я могу показать / скрыть дополнительные div в зависимости от установленного значения данных?

Question

У меня есть некоторый JavaScript (Jquery), который будет показывать установленное количество div в зависимости от арбитража данных в html.

Если для атрибута установлено значение 3, он покажет 3 div и щелчок «show more» приведет кпоказать все элементы div *

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

Моя текущая проблема заключается в том, что всеразделы отображаются по щелчку, а затем исчезают, как только они появляются.

Желаемый эффект состоит в том, чтобы каждый раздел скрывался и отображался в зависимости от щелчка по отдельности.

var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
  'use strict';
  //variables

  var _sectorPageStrengths = $('.sectorpage-strengths'),
    _elements = 0,
    // methods
    init,
    _bindShowMore, _bindShowLess,
    _adjustHeigt, _checkElemnt, equalHeight;


  _checkElemnt = function($element) {
    var _vp = INF.global.device.viewportN;

    if (_vp === 0) {
      var count = $element.data('desktop');
      $element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
      if ($element.find('.marg1').length >= (count + 1)) {
        $element.find('.view-all-sectors-btn-container').show();
      } else {
        $element.find('.view-all-sectors-btn-container').hide();
      }
      _elements = count;
    } else if (_vp === 1) {
      $element.find('.marg1:nth-child(n+5)').hide();
      if ($element.find('.marg1').length > 4) {
        $element.find('.view-all-sectors-btn-container').show();
      } else {
        $element.find('.view-all-sectors-btn-container').hide();
      }
      _elements = 4;
    } else {
      $element.find('.marg1:nth-child(n+4)').hide();
      _elements = 3;
    }
  };

  _bindShowMore = function(container) {
    // if data-items, data-infinite is defined, used it
    var _showMore = $('.view-all-sectors-btn');
    _showMore.on('click', function() {
      $('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
      $(this).parents('.sectorpage-strengths').toggleClass('showLess');
    });
  };

  _bindShowLess = function() {
    var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
    _showLess.on('click', function() {
      $('html, body').animate({
        scrollTop: _sectorPageStrengths.offset().top - 35
      }, 700);
    });
  };
  init = function() {
    var EachView = jQuery('.sectorpage-strengths');
    EachView.each(function(index, element) {
      if (_sectorPageStrengths.length > 0) {
        _checkElemnt($(element));
        _bindShowMore(_sectorPageStrengths);
        _bindShowLess();
        $(window).on('load', function() {
          equalHeight();
        });
      }
    });

    $("#loadPDFComponentModal").on('hidden.bs.modal', function() {
      $("#hiddenIframe").html("");
    });
  };

  return {
    init: init
  };
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main</h2>
    </div>
    <div class="row  sectorpage-strengths-list">

      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>

      <div class=" marg1" style="display: none;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>



    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main</h2>
    </div>
    <div class="row  sectorpage-strengths-list">

      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>

      <div class=" marg1" style="display: none;">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container" style="height: 140px;">
              <h3>heading</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>



    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>

Answer 1

Здесь я обхожу ваш код, чтобы просто дать самый простой ответ на актуальный вопрос. Я оставлю это для вас, чтобы работать с этим в вашем коде.

ПРИМЕЧАНИЕ Если вы решите не использовать класс, вы можете сделать .toggle(true); вместо .toggleClass('hidden', true);

Я использовал класс для упрощения исходного HTML.

$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
  var sect = $(event.delegateTarget);
  var sectCount = sect.data('desktop');
  var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
  strengths.toggleClass('hidden', false);
  var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
  strengths.slice(0, showCount).toggleClass('hidden', true);
  $(this).toggleClass('hidden', true);
  $(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});

.sectorpage-strengths .marg1 {
  border: solid lime 1px;
}

.yellow-container {
  height: 140px;
  background-color: #FFFFE0;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main1</h2>
    </div>
    <div class="row  sectorpage-strengths-list">
      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading1 1</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
      <div class=" marg1 hidden">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading1 2</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
  <div class="container">
    <div class="row">
      <h2>heading main2</h2>
    </div>
    <div class="row  sectorpage-strengths-list">
      <div class=" marg1">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading2 1</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
      <div class=" marg1 hidden">
        <div class="sectorpage-strengths-list-item">
          <div class="main-container">
            <div class="yellow-container">
              <h3>heading2 2</h3>
            </div>
          </div>
          <div class="text-description">
            text
          </div>
          <div class="slant"></div>
        </div>
      </div>
    </div>
    <div class="row view-all-sectors-btn-container">
      <span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
      <span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
    </div>
  </div>
</section>

Answer 2

Вы прослушиваете все нажатия кнопки «Просмотреть больше» в своем коде. так что это вызывает проблемы.

Обновление кода

Код

должен обрабатывать отдельный контейнер. Изменения в файле:

  _checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;

if (_vp === 0) {
  var count = $element.data('desktop');
  $element.find('.marg1').hide();
  if ($element.find('.marg1').length >= (count + 1)) {
    $element.find('.view-all-sectors-btn-container').show();
  } else {
    $element.find('.view-all-sectors-btn-container').hide();
  }
  _elements = count;
} else if (_vp === 1) {
  $element.find('.marg1:nth-child(n+5)').hide();
  if ($element.find('.marg1').length > 4) {
    $element.find('.view-all-sectors-btn-container').show();
  } else {
    $element.find('.view-all-sectors-btn-container').hide();
  }
  _elements = 4;
} else {
  $element.find('.marg1:nth-child(n+4)').hide();
  _elements = 3;
}

$element.find('.marg1').slice(0,count).each(function(index, ele){
    $(ele).attr('data-display', true).show();
});

};

и

  _bindShowMore = function(container) {
  var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
   var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
  $(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
  $(this).parents('.sectorpage-strengths').toggleClass('showLess');
  $(this).text(isAllVisible ?'view more' : 'view less');
    if(isAllVisible){
        console.log('isAllVisible', isAllVisible); // you handle some other action here if required
    }
});

};

и

  init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
  if (_sectorPageStrengths.length > 0) {
    _checkElemnt($(element));
    _bindShowMore(element);
    // _bindShowLess(); this behaviour handled in bindShowMore itself
    $(window).on('load', function() {
      equalHeight();
    });
  }
});

Надеюсь, это поможет вам.