Question

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

所以我在Fadi的原始问题上得到了答案，它完美无缺。我如何才能将两个div用于相同的数据协作类别？

我想让团队出现在＆＃34; Collaborate Socially＆＃34;和＃34;在文件上协作＆＃34; - 类别＆＃34;项目，文件，社交＆＃34;都在使用数据决策定义。

我尝试添加两个data-decision =＆＃34;项目＆＃34;数据判决=＆＃34;社会＆＃34;在一个div中，它没有用。

＆＃13;

<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>

＆＃13;

Answer 1

一旦开始使用debugPrint(Path(Bundle.main.bundlePath + "/wwww/assets").exists) //true属性

，此修复就变得简单了

解决方案的两面

HTML

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

data

JS

要使HTML生效，我们将更改您data-decision="socially files"语句，其中检查数据属性是否与选择的相同。现在我们将验证数据属性是否包含曾经选择过的。

这是你的if语句

if

这是新的if语句

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

希望这会有所帮助：＆gt;

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

在show / hide上使用多个div

1 个答案: