我创建了一个模态框。在我的模式框中，有名为出版物和食品的子类别。每个子类别都链接到一个复选框，该复选框在单击时会更改颜色；它还选中和取消选中复选框。我还添加了代码，允许在模式框关闭后将 div 中的文本加载到页面上。
我希望在模态框关闭后，只有选中的类别才能将div中的信息加载到页面上。
基本上，如果用户选择通过单击将其变为红色来检查发布，我希望在模式框关闭后只在页面上显示该 div。 (另一类反之)
但是如果用户选中了两个子类别，我希望在模式框关闭后，来自 div 的信息都显示在页面上。
我已经尝试为子类别和 div 创建新的唯一 ID，但由于某些原因，它们没有被分开处理。
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<style>
.onlyThese{
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label { color:blue }
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
}
input:focus{
outline: none;
}
</style>
<body>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5"; class="modal"; style="background-color:white">
<div style="float:left;">
<p> <input type="checkbox" id="group1" class="yourCheckbox" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv"> blastoise </div>
<p> <input type="checkbox" id="group2" class="yourCheckboxx" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close"; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
<script>
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function(){
if($(this).prop("checked")) {
$('#myDiv, #myDivs').show();
content = $('#myDiv, #myDivs').html();
} else {
$('#myDiv, #myDivs').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
</body>
</html>代码应该可以实现如下:
- -用户与名为扇区的模态框交互
- 用户点击子类别将其变为红色，同时检查 复选框
- - 用户点击应用并将来自该特定类别 div 的信息加载到页面上
最佳答案
您可以使用 data通过从 $.data 获取其值来区分具有相同事件的元素的属性, 请考虑以下内容:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).show();
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).hide();
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
}).onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close" ; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
</body>关于javascript - 如何使用模态框单独加载文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57460733/