模态文本在其他模态中重复

Question

我正在做一个项目，其中我有一个包含几行的表格，在表格的一列中，我有按钮，单击时会显示模态。

此模态具有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>

Answer 1

发生这种情况是因为您指的是带有$(".modal-body")的.modal-body，并且可能有更多具有相同class名称的模态

如果要引用特定的模态，则应更具体。

您可以将$(".modal-body")替换为$("#basicModal .modal-body")，以仅选择父#basicModal下的.modal-body