Question

我的网页上有两个按钮（模态1和模态2）。

＆＃13;

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>Example</h2>
      <!-- Trigger the modal with a button -->
      <button id="1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 1</button>
      <button id="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 2</button>
      <!-- Modal -->
      <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">Header</h4>
            </div>
            <div class="modal-body">
              <p>...change string here...</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
          
        </div>
      </div>
      
    </div>
    
    </body>
    </html>

＆＃13;

从上面的代码中可以看出，两个模态都会弹出div＆＃34; modal-body＆＃34;。

我想更改身体，而不是＃34; ...在这里更改字符串...... ＆＃34;它应该显示＆＃34; id ＆＃34;打开模态的按钮。

有人可以告诉我这是否可以在jQuery中进行？

Answer 1

这当然是可能的，而且它实际上比你想象的容易得多！

您只需将点击处理程序附加到两个按钮，这两个按钮会更改$(".modal-body > p")＆＃39; .html() ，并通过this.id（如this指的是附加了点击处理程序的元素：

＆＃13;

$("#1, #2").on("click", function() {
  $(".modal-body > p").html(this.id);
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Example</h2>
    <!-- Trigger the modal with a button -->
    <button id="1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 1</button>
    <button id="2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Modal 2</button>
    
    <!-- Modal -->
    <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">Header</h4>
          </div>
          <div class="modal-body">
            <p>...change string here...</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    
  </div>

</body>

</html>

＆＃13;

jQuery：动态更新模态体

1 个答案: