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

Posted 2023-03-14

【中文标题】模态文本在其他模态中重复

【英文标题】：Modal text is repeting in other modals

【发布时间】：2020-04-07 03:01:32

【问题描述】：

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

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

【问题讨论】：

你所有的模态框都有id 的basicModal 吗？

@MattHamer5 是的，他们使用所有相同的模态

@MattHamer5 我正在搜索，我看到 id 是随机生成的，就像 id="'basicModal_" + "random'" 一样，但我不知道这是否会是什么“适用”到我的问题。

【参考方案1】：

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

如果你想引用一个特定的模态，你应该更具体。

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

【讨论】：

问题是，上面的模态用于所有按钮被点击时

哦，重复的消息是 $("#sendMessage").click(function() ...

@ack31 我无法理解这个问题 :(，您是否尝试使用 ID 来引用模态？