获取数据属性的值，并在Bootstrap中以模式显示

时间：2018-10-15 07:24:21

标签： javascript jquery twitter-bootstrap-3

我正在使用Bootstrap v.3.3.7，并且在我的页面中放置了很多按钮，这些按钮可以显示modal。在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移到了模式链接中。但是，它不会在第一次点击中获得该值，而是在第二次点击中获得

！

2 个答案:

答案 0 :(得分：1)

您可以使用data-content属性而不是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>

答案 1 :(得分：0)

请以此替换您的jquery代码。希望对您有所帮助。请参阅this 

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

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

  var btnid = 0;
  $('.btn-primary').click(function() {
    btnid = $(this).attr('data-id');
    console.log("btnid = " + btnid);
    var textToShow = 'click ' + btnid;
    if(click>0){$('.stopMachine').popover('destroy');}
    $('.stopMachine').popover({
      placement: 'right',
      html: true,
      trigger: 'toggle',
      content: textToShow
    });
    click++;
  });     
});
相关问题
最新问题