Question

我正在使用模式显示数据。在模式中，我正在动态显示从数据库中获取的数据。对于后端，我正在使用Laravel。为了将数据动态显示给模态，我在按钮上创建了一个函数，单击该按钮即可打开模态。这是按钮。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" onclick="sendData('{!!$singleWorkout->title!!}', '{!!$singleWorkout->image!!}')">View</button>

在这里，我正在向sendData函数发送动态数据。这是我的sendData功能代码。

function sendData(title, image) {
$('#modal-title').append(title);
$('#modal-image').append('<img src="/file/'+image+'" height="200px" width="100%">');
}

此功能可将数据动态添加到我的模态中。

这是我的模态代码。

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">
        <div id="modal-title">

        </div>
      </h4>
    </div>
    <div class="modal-body" id="modal-image">
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

现在的问题是，如果我单击view按钮以打开模式，则第一次单击就可以正常工作。如果我再次单击该按钮，它将显示新单击的数据，也显示先前单击的数据。所以我的问题是如何停止显示以前单击的数据。

Answer 1

最后我找到了解决方案。我使用了html而不是append。所以我的js函数看起来像

function sendData(title, image) {
$('#modal-title').html(title);
$('#modal-image').html('<img src="/file/'+image+'" height="200px" width="100%">');

}

JavaScript先前显示的点击数据

1 个答案: