Javascript 如何根据数据值集显示/隐藏额外的div？

我有一些JavaScript Jquery，它将根据html中的数据仲裁显示一定数量的div

如果属性设置为3，则将显示3个div，单击“显示更多”将显示所有div

它需要对多个部分执行此操作，每个部分都有自己的数据属性，并且只显示或隐藏属于所单击部分的div

我目前的问题是，所有的部分都会在单击时显示，然后一出现就消失

所需的效果是根据单击分别隐藏和显示每个部分

var INF=window.INF | |{}； INF.sectorPageStrengths=functionwindow，$，命名空间{ "严格使用",； //变数 var_sectorPageStrengths=$'。sectorPageStrengths'， _元素=0， //方法 初始化， _bindShowMore，_bindShowLess， _调整高度、检查元素、等高； _checkElemnt=函数$element{ var\u vp=INF.global.device.viewportN； 如果_vp==0{ var count=$element.data'desktop'； $element.find'.marg1:n个childn+'+count+1+.hide； 如果$element.find'.marg1'.length>=count+1{ $element.find'.查看所有扇区btn容器'.显示； }否则{ $element.find'.查看所有扇区btn容器'.隐藏； } _元素=计数； }如果_vp==1，则为else{ $element.find'.marg1:n个childn+5'.hide； 如果$element.find'.marg1'.length>4{ $element.find'.查看所有扇区btn容器'.显示； }否则{ $element.find'.查看所有扇区btn容器'.隐藏； } _元素=4； }否则{ $element.find'.marg1:n个childn+4'.hide； _元素=3； } }; _bindShowMore=functioncontainer{ //如果定义了数据项、数据无限，则使用它 var_showMore=$'。查看所有扇区btn'； _showMore.on'click'，函数{ $'.sectorpage Strength.container>.row+.row>.marg1:n个childn+'+\u元素+1+.slideToggle； $this.parents'.sectorpage强项'.toggleClass'showLess'； }; }; _bindShowLess=函数{ var _showLess=_sectorPageStrengths.find'。查看所有扇区btn.less'； _不显示。单击，功能{ $'html，body'。设置动画{ scrollTop:_sectorPageStrengths.offset.top-35 }, 700; }; }; init=函数{ var EachView=jQuery'.sectorpage-strengths'； EachView.eachfunctionindex，元素{ 如果_sectorPageStrength.length>0{ _checkElemnt$元素； _bindShowMore_部门优势； _不显眼的； $window.on'load'，函数{ 等高； }; } }; $loadPDFComponentModal.on'hidden.bs.modal'，函数{ $hiddenIframe.html； }; }; 返回{ init:init }; }这个，jQuery，'INF'； jqueryif.sectorPageStrengths.init； 主航向 标题 文本 标题 文本 查看更多 少看 主航向 标题 文本 标题 文本 查看更多 少看

---

您正在收听代码中的所有“查看更多”按钮。因此，它会引发问题

更新代码

代码应该处理单个容器。文件更改如下：

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

})

及

})

及

---

我希望这将对您有所帮助。

这里我绕过您的代码，只提供实际问题的最简单答案。我将把它留给您在代码中使用

注意，如果您选择不使用类，您可以这样做；而不是.toggleClass'hidden'，true

我使用了一个类来简化原始HTML

$'.sectorpage strengths'。单击，'。查看所有扇区btn'，functionevent{ var sect=$event.delegateTarget； var sectCount=sect.data'desktop'； var Strength=sect.find'.sectorpage Strength list'.find'.marg1'； 强项。切换类“隐藏”，错误； var showCount=$this.hasClass'less'？strength.length-1:sectCount-1； strengths.slice0，showCount.toggleClass'hidden'，true； $this.toggleClass'hidden'，true； $this.sides'.查看所有扇区btn'.切换类别'hidden'，false； }; .行业优势。marg1{ 边框：固体石灰1px； } .黄色容器{ 高度：140像素； 背景色：FFFF0； } .隐藏{ 显示：无； } 标题main 1 标题1 文本 标题1 2 文本 查看更多 少看 标题main 2 标题2 1 文本 标题2 文本 查看更多 少看

---

我猜上面的大部分代码和标记都与这个特定问题无关。你能简化吗？同样，对于像_adjustHeigt和_checkElemnt这样的变量名，如果拼写是你问题的一部分，我也不会感到惊讶。这很重要。@isherwood当然，我会尝试改进消息：uncaughtTypeError:无法读取undefined的属性“device”，运行时，我看到了这个错误。简化示例或尝试解决该问题，以便我们可以在此处处理真正的问题。这比需要的复杂得多。哎呀，我以为你面临显示/隐藏问题。让我更多地了解您的问题，然后我可以帮助您将要做的事情，我正在测试atm，因为您的答案在一些事情上有所帮助，所以+1单击“显示更多所有div应显示在所选div上”，单击“关闭”隐藏除data Desktop中所述金额以外的所有内容。请检查您添加的更新代码的问题。如果我展开它会显示div1，3和4。这可以做得简单得多——注意，我知道在最初的OP问题中是这样的，但仍然如此。

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