javascript - 如何根据按钮单击更改引导模式内容
问题描述
我需要能够根据单击的按钮更改模式内的内容。
例如,如果单击按钮一,它将仅显示div
带有class
“一”的按钮,而其他按钮将保持隐藏状态。
$('#exampleModalCenter').modal('toggle')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">one</button>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">two</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">three</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="one">Button three content</div>
</div>
</div>
</div>
</div>
解决方案
$(document).on("click",".modal-open",function(){
var button_val = $(this).attr("data-val");
$('#exampleModalCenter').modal('show');
$(".conditional-div").hide();
$("#exampleModalCenter ."+button_val).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn modal-open" data-val="one" >one</button>
<button type="button" class="btn modal-open" data-val="two" >two</button>
<button type="button" class="btn modal-open" data-val="three" >three</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="one conditional-div">Button one content</div>
<div class="two conditional-div">Button two content</div>
<div class="three conditional-div">Button three content</div>
</div>
</div>
</div>
</div>
推荐阅读
- java - 如何使用 --add-opens 参数来摆脱非法反射访问警告?
- python - 从作业处理器启动线程时,如何跟踪作业工作线程的进度?
- r - Loop character values in ggtitle
- javascript - 如何将身份验证标头传递给其他组件
- android - 错误:程序类型已存在:com.google.android.gms.common.internal.zzb
- docker - 具有相同容器端口的多个 docker 容器连接到同一网络
- python-3.x - Python IP logger 以 csv 格式接收和输出数据
- python - Python:我想创建一个变量来存储递减我的“限制”变量,但它没有递减
- javascript - 正则表达式 url 参数
- python - 如何处理包安装错误?