javascript - 获取数据属性的值并将其显示在 Bootstrap 的模式中

Question

我正在使用Bootstrap v.3.3.7，并且在我的页面中我放置了很多用于显示模式的按钮。在 modal 内，我放置了一个 popover 按钮。

<a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a>

使用 jQuery，我获取了 data-id 属性的值，并尝试将该值显示为弹出窗口文本。

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
  });

  var textToShow = 'click ' + btnid;

  $('.stopMachine').popover({
    placement: 'right',
    html: true,
    trigger: 'toggle',
    content: textToShow
  });

但是，在所有情况下我都会得到click 0...

$(function() {
  $('#open1').click(function() {
    $('#myModal1').modal('show')
  });

  $('#open2').click(function() {
    $('#myModal2').modal('show')
  });

  var btnid = 0;

  $('.stopMachine').popover({
    placement: 'right',
    html: true,
    trigger: 'toggle',
    content: function() {
      $('.stopMachine').click(function() {
        btnid = $(this).data('id');
        console.log("btnid = " + btnid);
      });
      var message = 'click ' + btnid;
      return message;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a>

<a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a>


<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

更新:

我将data-attribute移动到模式中的链接内。但是，它不会在第一次点击时获取值，而是在第二次点击时获取值!

Answer 1

您可以使用 data-content 属性代替 popover 属性，在页面就绪时启动 popover:

$(function() {
  $('#open1').click(function() {
    $('#myModal1').modal('show');
    $('#myModal1 .stopMachine').attr('data-content',"click "+$(this).attr('data-id'));
  });

  $('#open2').click(function() {
    $('#myModal2').modal('show');
    $('#myModal2 .stopMachine').attr('data-content',"click "+$(this).attr('data-id'));
  });


  $('.stopMachine').popover({
    placement: 'right',
    html: true,
    trigger: 'toggle',
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="open1" class="btn btn-primary" data-id="1" rel="popover" data-target="Message">open modal 1</a>

<a href="#" id="open2" class="btn btn-primary" data-id="2" rel="popover" data-message="Message">open modal 2</a>


<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

对于修改后的代码，您不需要任何点击事件，您需要执行以下操作

$('#open1').click(function() {
  $('#myModal1').modal('show')
});

$('#open2').click(function() {
  $('#myModal2').modal('show')
});

$('.stopMachine').each(function() {
  $(this).attr('data-content', "click " + $(this).attr('data-id'));
})

$('.stopMachine').popover({
  placement: 'right',
  html: true,
  trigger: 'toggle',
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<a href="#" id="open1" class="btn btn-primary" rel="popover" data-target="Message">open modal 1</a>

<a href="#" id="open2" class="btn btn-primary" rel="popover" data-message="Message">open modal 2</a>


<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" data-id="1" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModal-label">Modal title</h4>
      </div>
      <div class="modal-body">
        <a href="#" class="btn btn-success stopMachine" data-id="2" rel="popover" data-message="Message">info</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>