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

Question

我正在做一个项目，其中我有一个包含多行的表格，并且在表格的其中一列中我有按钮，当点击时会显示一个模式。

此模态有一个input 和一个div，其中写入的input 将出现。

问题是我在单个模态中写的内容出现在其他模态中。

有没有办法让它们“独立”？下面是我写的代码。

当您运行下面的 sn-p 时，会出现类似的内容 模态的。您在输入中写入并进入 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