javascript - 在显示/隐藏时使用多个 div

Question

这与我原来的问题有关，已解决:JavaScript show/hide divs

因此，我采用了 Fadi 对原始问题的回答，并且效果很好。我如何才能将两个 div 用于同一数据协作类别？

我想让团队出现在“社交协作”和“文件协作”下 - “元素、文件、社交”类别都使用数据决策定义。

我试过在一个 div 中添加两个 data-decision="projects"data-decision="socially"但没有成功。

<div class="outer-container">
        <div class="row">
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
                    Collaborate on Projects</div>
            </div>
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
                    Collaborate on Files</div>
            </div>
            <div class="col-md-4" style="text-align: center;">
                <div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
                    Collaborate Socially</div>
            </div>
        </div>
        <hr />
        <div class="container" style="padding: 0px;">
        <div class="row">
            <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="files" id="decisionTreeOneDrive"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>OneDrive</h3></div>
                </div></a>
            <!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                </div></a> -->
            <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="files" id="decisionTreeSharePoint"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>SharePoint</h3></div>
                </div></a>
            <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="socially" id="decisionTreeTeams"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Teams</h3></div>
            	</div></a>
            <a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="projects" id="decisionTreePlanner"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Planner</h3></div>
            	</div></a>
            <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="socially" id="decisionTreeYammer"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Yammer</h3></div>
            	</div></a>
        </div>
        </div>
        </div>
        <script>
        function projectCollab(){
            var divsToCange = document.querySelectorAll('[data-decision]'),
                attr = this.getAttribute('data-collaborate');

            for(var i = 0; i < divsToCange.length; i++){
                var d = divsToCange[i];
                if(d.getAttribute('data-decision') == attr) {
                    d.parentNode.style.display ='block' ;
                  }
                else{
                    d.parentNode.style.display = 'none';
                }
            }
            return false;
        }

        var divButtons = document.querySelectorAll('[data-collaborate]');

        for(var i = 0; i < divButtons.length; i++){
            divButtons[i].addEventListener('click', projectCollab);
        }
        </script>

Answer 1

一旦您开始使用 data 属性

，这个修复就很容易了

解决方案的两个方面

HTML

您将能够堆叠由空格分隔的值

data-decision="socially files"

JS

为了使 HTML 正常工作，我们将更改您的 if 语句，您在其中检查数据属性是否与曾经选择的相同。现在我们要验证数据属性是否包括曾经被选中。

这是你的 if 语句

if(d.getAttribute('data-decision') == attr)

这是新的 if 语句

if (d.getAttribute('data-decision').includes(attr)) 

希望对您有所帮助:>

function projectCollab() {
  var divsToCange = document.querySelectorAll('[data-decision]'),
    attr = this.getAttribute('data-collaborate');

  for (var i = 0; i < divsToCange.length; i++) {
    var d = divsToCange[i];

    if (d.getAttribute('data-decision').includes(attr)) {
      d.parentNode.style.display = 'block';
    } else {
      d.parentNode.style.display = 'none';
    }
  }
  return false;
}

var divButtons = document.querySelectorAll('[data-collaborate]');

for (var i = 0; i < divButtons.length; i++) {
  divButtons[i].addEventListener('click', projectCollab);
}

<div class="outer-container">
  <div class="row">
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="projects" class="decisionTreeBox collabProjects" style="font-size: x-large;">
        Collaborate on Projects</div>
    </div>
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="files" class="decisionTreeBox collabFiles" style="font-size: x-large;">
        Collaborate on Files</div>
    </div>
    <div class="col-md-4" style="text-align: center;">
      <div data-collaborate="socially" class="decisionTreeBox collabSocially" style="font-size: x-large;">
        Collaborate Socially</div>
    </div>
  </div>
  <hr />
  <div class="container" style="padding: 0px;">
    <div class="row">
      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="files" id="decisionTreeOneDrive">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>
          </div>
        </div>
      </a>
      <!-- <a href="/TrainingResourceCenter/O365Training/Pages/O365.aspx"><div class="col-md-4 margin-bottom-20" style="text-align: center;">
                <div data-decision="projects" id="decisionTreeProject"><h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/Project.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;"/>Project</h3></div>
                </div></a> -->
      <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="files" id="decisionTreeSharePoint">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="socially files" id="decisionTreeTeams">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Planner.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="projects" id="decisionTreePlanner">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/PlannerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Planner</h3>
          </div>
        </div>
      </a>
      <a href="/TrainingResourceCenter/O365Training/Pages/Yammer.aspx">
        <div class="col-md-4 margin-bottom-20" style="text-align: center;">
          <div data-decision="socially" id="decisionTreeYammer">
            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/YammerDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Yammer</h3>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<script>
</script>