我创建了一个模态框。在模式框中有一个蓝色的文本。文本称为 Publication，它链接到我的复选框。用户将与文本进行交互，并且他们所做的乳清会从蓝色变为红色。当文本为红色时，表示复选框已选中。
现在的问题是我希望文本发布为红色时显示的文本仅在用户单击应用后显示。
目前，我曾尝试使用 .prop，但整个代码随后崩溃，最终无法正常工作。
请有人能告诉我一个可行的解决方案。
<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>
<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" > <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv">the preparation and issuing of a book, journal, or piece of music for public sale.</div>
</div>
<div>
<p style="float:right">
<a href="#" rel="modal:close"; class="onlyThese;"> <b>Apply</b> </a>
</p>
</div>
</div>
<script>
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
});
$('.yourCheckbox').change(function(){
if($(this).prop("checked")) {
$('#myDiv').show();
} else {
$('#myDiv').hide();
}
});
</script>
预期输出如下:
用户点击名为“sectors”的模态框
然后用户与名为“publication”的蓝色文本进行交互
用户点击所述文本，它变成红色，这又选中了复选框
用户点击关闭模态框，div中包含的信息显示在屏幕上。
最佳答案
这是您想要实现的目标吗？运行代码段以查看结果。
<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>
<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" > <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv">the preparation and issuing of a book, journal, or piece of music for public sale.</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,
});
});
$('.yourCheckbox').change(function(){
if($(this).prop("checked")) {
$('#myDiv').show();
content = $('#myDiv').html();
} else {
$('#myDiv').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
关于javascript - 模式框关闭后如何在屏幕上显示文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57434436/