javascript - 模态文本在其他模态中重复
问题描述
我正在做一个项目,其中我有一个包含多行的表格,并且在表格的其中一列中,我有按钮,单击时会显示模式。
这个模态有一个input
和一个文字将出现的div
地方。input
问题是我在单个模态中写的内容出现在其他模态中。
有没有办法让他们“独立”?下面是我写的代码。
当您运行下面的代码段时,这与模式中出现的内容类似。您在输入中写入并进入 div 的文本是在所有模式中重复的内容。
$(document).ready(function() {
// send message to modal if message is empty do not send anything or if it is only spaces
$("#sendMessage").click(function() {
if ($.trim($("#inputToSend").val()) == "") {
//do not send anything
} else {
$(".textModal").append(
'<p class="msg">' + $("#inputToSend").val() + "</p>"
);
$("#inputToSend")
.val("")
.focus();
}
});
// when modal button is closed text is erased
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body").html("");
$(".modal-title").html("");
});
});
.modal-title {
background: #66a3ff;
font-size: 18px;
display: inline-block;
height: 100%;
}
.modal-body {
padding: 30px 20px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
}
#messageInput {
padding: 0px 20px;
}
#sendMessage {
margin: 15px 0px;
}
#inputToSend {
margin-top: 25px;
margin-left: 15px;
width: 730px;
}
#messageSaved {
margin: 0px 15px;
font-size: 16px;
padding: 10px;
border: inset;
height: 100px;
overflow: auto;
text-align:justify;
}
.msg {
margin: 0 0 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="btn-id" class="btn btn-sm btn-focus" style="padding: 8px;" data-id="{{ $complaint->_id }}" data-msg="{{ $complaint->ns1aussage }}" data-complain="{{ $complaint->ns1teileidentnr }}" data-backdrop="false" data-toggle="modal" data-target="#basicModal"><i class="fa fa-envelope-o"></i></a>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="title"></h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div id="messageInput">
<div id="messageSaved" class="textModal"></div>
<input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
<button id="sendMessage" class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>
解决方案
发生这种情况是因为您指的是.modal-body
with $(".modal-body")
,并且可能有更多具有相同class
名称的模态
如果你想引用一个特定的模态,你应该更具体。
您可以替换$(".modal-body")
为$("#basicModal .modal-body")
仅选择.modal-body
父项下的#basicModal
推荐阅读
- reactjs - Why am I getting a blank screen while following React JS?
- r - 使用管道优雅地设置 data.frame 的元素
- java - ScrollView 在 android 应用程序打开时自动滚动关闭
- excel - 使用 getElementById VBA 网页抓取
- dialogflow-es - Dialogflow Intent 将在所讲内容的基础上显示附加文本
- angular - testability.whenStable() 返回, testability.isStable() 返回 false
- db2 - 加载 IBM cloud Db2-warehouse 教程数据时出错
- scala - Polymorphic return type by using TypeTag in Scala
- javascript - Can't use ajax POST and jquery animation simultaneously (using Bootstrap)
- mocha.js - 带有 Mocha 的 TS-Node 不使用 TS_NODE_PROJECT