时间戳

首页 > 解决方案 > 将 HTML 内容设置为单击按钮选择的元素

javascript - 将 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 代码显示在 card 类中的第一个 div Child 上。

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

因为我将有多个表单，并且需要在每个表单的顶部显示警报并尽量减少代码重复。我需要指定相对于在没有 ID 选择器的情况下单击的按钮的 div。

我试过这个，但没有用。请你帮忙。

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

标签： javascriptjqueryhtml

解决方案

无法从您发布的代码中看出您是如何设置事件侦听器的，以及是否this指的是您想要的元素。这是您尝试执行的操作的简化示例：

const containers = $('.container');
containers.click(function() {
  $(this).find('.alert').html('Alert');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

推荐阅读