javascript - 在显示/隐藏时使用多个 div
问题描述
这与我原来的问题有关，已解决：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>解决方案
一旦你开始使用data属性，这个修复就很容易了
解决方案的 2 个方面
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>推荐阅读
- oauth-2.0 - 有没有办法让微软的 oauth2 设备流 API 返回一个verification_uri_complete？
- jquery - 防止 django 表单在提交时刷新整个页面
- azure - Azure DevOps 管道错误 - 参数 linuxProfile.ssh.publicKeys.keyData 的值无效
- android - 页面仍在加载时，进度对话框在出现在屏幕上之前关闭
- woocommerce - 动态改变步进产品变化
- asp.net-core - NSwag AspNetCore 驼峰案例生成设置
- wordpress - WP 发送电子邮件 - 更改通知到新电子邮件
- excel - 从纯文本复制时的 Excel 文本格式化程序
- android - 子可点击/父长可点击
- angular - 页面重新加载时面包屑未以 Angular 7 显示