Question

每当我点击图片时，都会弹出一个模态框，并附上一段附加的段落。我有两个问题。首先，我的标题文本没有附加到标题元素。其次，每次点击笔记本电脑时，它都会将相同的段落附加到模态框中。

HTML

<!--Trigger Image -->
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/02-512.png" id="laptop" class="openmodal">

<!--Modal Box -->
<div class="question" id="question-modal">
  <header id="modal-header">
    <a href="#" class="close">X</a>
  </header>
  <div class="answer">
  </div>
</div>

JS

var id = this.id;

//Open the modal box
$('.openmodal').on('click', function() {
  $('#question-modal').modal('show');
  if (id == 'laptop')
    $('header').append('<h3>FAQs on laptops</h3>');
    $('.answer').append("Mac > any PC");
});

//close modal box
$('.close').on('click', function() {
  $('#question-modal').modal('hide');
});

如果该说明不明确，请点击Implementing custom methods of Spring Data repository and exposing them through REST。

我不确定如何在关闭包装盒时暂时删除该段落。我试过.remove（）但是当点击笔记本电脑时，段落被完全删除（好吧没有）。 .detach（）也不起作用。

Answer 1

如果我正确理解了所需的行为，那么我相信您正在寻找.empty()

在close模式回调中，尝试添加：

$('.answer').empty();

Answer 2

更改模式框，点击此处：

//Open the modal box
$('.openmodal').on('click', function() {
    $('#question-modal').modal('show');
    if (this.id == 'laptop')
    $('header'). append('<h3>FAQs on laptops</h3>');
    $('.answer').empty();
    $('.answer').append("Mac > any PC");
  });

空的应该是开放式模式。否则，如果模态仍然打开，则会添加其他段落

你如何防止在jQuery的BS模态div中多次追加html？

2 个答案: