将HTML内容设置为通过单击按钮选择的元素

时间:2018-08-28 20:13:15

标签: javascript jquery html

下面是我通过遍历PHP行填充的一种形式。

<div class="card" >
  <div class="Results" id="Results"></div>  <!-- to display alert -->
  <div class="card-header">
    <h1>XXX</h1>		
  </div>
  <div class="card-body" >
    <form id="PayBillFormForm3" method="post" action="">	
      <input name="user" value="mat" type="hidden">
      <input name="id" value="12" type="hidden">
    </form>
    <button class="btn btn-success pay" value="pay">pay</button>
    <button class="btn btn-danger decline" value="decline" >decline</button>
  </div>
</div>

在PHP中执行订单后,我收到一个警报,该警报将通过以下ajax代码显示在卡片类中的第一个div Child内。

var formMessages = $('#Results');
(formMessages).html(alertBox);

由于我将拥有多种形式,因此需要在每种形式的顶部显示警告,并最大程度地减少代码重复。我需要指定相对于没有ID选择器单击的按钮的div。

我尝试过,但是没有用。请您帮忙。

var card = $(this).closest(".card");
var formMessages = card.find(".Results");
(formMessages).html(alertBox);

1 个答案:

答案 0 :(得分:0)

无法从您发布的代码中得知如何设置事件侦听器以及this是否引用了您想要的元素。这是您尝试做的事情的简化示例:

const containers = $('.container');

containers.click(function() {
  $(this).find('.alert').html('Alert');
});
<div class="container">
  <div class="alert"></div>
  <button>Show Alert</button>
</div>
<br>
<div class="container">
  <div class="alert"></div>
  <button>Show Alert</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>