在 twitter bootstrap 中显示/隐藏带有数据属性的警报框

Question

我想在 twitter bootstrap 中使用数据属性显示隐藏警报框，这是因为我可以在一页中使用多个警报框...

目前我有这个，

<a href="#" data-box="myAlert">Hint</a> //data-box is the id of the box

<div id="myAlert" class="alert alert-info">
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    <p>Alert Me !!!!</p>
</div>

Answer 1

试试

$(function(){

  $('[data-box]').click(function(){
    var $this = $(this);
    $('#' + $this.data('box')).show()
    return false;
  });

  $(document).on('click', '.alert .close', function(){
    $(this).closest('.alert').hide()
  });

});

演示：Plunker

更新
使用锚标签显示/隐藏

<a href="#" data-box="myAlert">Hint</div>

<div id="myAlert" class="alert alert-info hide">
    <p>Alert Me !!!!</p>
</div>  

$(function(){

  $('[data-box]').click(function(){
    var $this = $(this);
    $('#' + $this.data('box')).toggle()
    return false;
  });

});

演示：Fiddle