从父母的兄弟姐妹获取文本并更改模式标题

时间：2019-03-02 19:38:25

标签： jquery

td的文本应更改为单击按钮的父项（td）的同级文本（前p）。

现在，对其进行一点编辑。现在，我需要来自td的同级$(function modalInfo() { $('.btn-modal').attr({ 'data-toggle': "modal", 'data-target': "#exampleModal", 'style': "border: solid 1px lightgray; border-radius: 20px; background: transparent; padding: 5px; padding-left: 7px; padding-right: 7px;" }); }); $('.btn-modal').click(function() { var modalTitle = $(this).parent().siblings(); $('modal-title').text(modalTitle); var modalBody = $(this) .closest('td') .next() .text(); $('.modal-body').text(modalBody); });中具有按钮的文本。

.topic-body {
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<table class="table" cellspacing="0" cellpadding="0" border="0" style="padding: 0; width: content; margin:0;">
  <tr class="topic-one">
    <td>Aaa</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
<p class="topic-body">Body text</p>
  </tr>
  <tr class="topic-one">
    <td>Bbb</td>


<td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Ccc</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Ddd</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Eee</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
</table>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"></span>
            </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quos sequi architecto nam dolorem explicabo iure ipsam itaque quia possimus blanditiis temporibus, illum cumque accusamus? Vero tempore sit aliquam velit. Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Facere modi nihil quae doloremque, odit omnis? Alias voluptate sapiente odit omnis exercitationem? Porro sapiente, eum quaerat totam explicabo non eos ratione. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam
        ducimus facilis natus ipsam repellendus velit ab accusantium, quas quod ad praesentium earum qui incidunt odit voluptates dolorem temporibus nulla nam!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>
f

`

1 个答案:

答案 0 :(得分：0)

不确定是否还有更简单的方法，但这是一个简单的方法：

$(function modalInfo() {

  $('.btn-modal').attr({
    'data-toggle': "modal",
    'data-target': "#exampleModal",
    'style': "border: solid 1px lightgray; border-radius: 20px; background: transparent; padding: 5px; padding-left: 7px; padding-right: 7px;"
  });

});

$('.btn-modal').click(function() {
  var modalTitle = $(this)
    .closest('td')
    .prev()
    .text();

  $('.modal-title').text(modalTitle);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<table class="table" cellspacing="0" cellpadding="0" border="0" style="padding: 0; width: content; margin:0;">
  <tr class="topic-one">
    <td>Aaa</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-one">
    <td>Bbb</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Ccc</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Ddd</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-two">
    <td>Eee</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-three">
    <td>Fff</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-three">
    <td>Ggg</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
  <tr class="topic-three">
    <td>Hhh</td>
    <td><button class="btn btn-light btn-modal">Read</button></td>
  </tr>
</table>
</div>
</table>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true"></span>
            </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus quos sequi architecto nam dolorem explicabo iure ipsam itaque quia possimus blanditiis temporibus, illum cumque accusamus? Vero tempore sit aliquam velit. Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Facere modi nihil quae doloremque, odit omnis? Alias voluptate sapiente odit omnis exercitationem? Porro sapiente, eum quaerat totam explicabo non eos ratione. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam
        ducimus facilis natus ipsam repellendus velit ab accusantium, quas quod ad praesentium earum qui incidunt odit voluptates dolorem temporibus nulla nam!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>

相关问题
最新问题