如何根据数据值集 show/hide 额外的 div？

Question

我有一些 JavaScript (Jquery) 会根据 html 中的数据仲裁显示一定数量的 div。

如果属性设置为 3，它将显示 3 个 div，单击 'show more' 将显示所有 div

它需要对多个部分执行此操作，每个部分都有自己的数据属性，并且仅显示或隐藏属于所单击部分的 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

您正在监听代码中所有 'view more' 按钮的点击。所以它引起了问题。

更新代码

代码应处理单个容器。文件更改是，

  _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();
    });
  }
});

希望对您有所帮助。

Answer 2

这里我绕过了你的代码，只为实际问题提供最简单的答案。我会留给你在你的代码中工作。

注意如果您选择不使用 class，您可以使用 .toggle(true); 而不是 .toggleClass('hidden', true);

我用了一个class来简化原来的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>

如何根据数据值集 show/hide 额外的 div？

How can I show/hide extra divs depending on data value set?

javascript

jquery

custom-data-attribute