javascript - 在同一页面中对数据目标模式使用相同的类

Question

我有一个个人资料列表页面。在页面内部，它具有带有数据目标 .popupmessage 的模式。问题是我将使用与我拥有的配置文件相同的类。当客户按下模式时如何具体说明？因为当我单击按钮模态来显示模态时，所有模态都会显示

<div class="col-xs-3">
  <div class="profile thumbnail">
    <img src="http://placehold.it/450x150">

    <button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
      Message
    </button>
    <div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

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

<div class="col-xs-3">
  <div class="profile thumbnail">
    <img src="http://placehold.it/450x150">

    <button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
      Message
    </button>
    <div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

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

这是例子 http://www.bootply.com/95vPZK1rN8

我想在.popUpMessage末尾添加一个数字 就像循环一样，每个 .popUpMessage 都会像这样 .popUpMessage1、.popUpMessage2、.popUpMessage3、.popUpMessage。但我好心地坚持了。 这是脚本

var start=1;
  var max=9999;

  for(start;start<=max;start++){
  //i stuck on the condition
}

Answer 1

据我所知，Bootstrap 不支持这种方式的多模态。每个data-target属性都必须指向一个特定且唯一的模式。否则(这就是您现在的问题)，Bootstrap 将简单地显示所有这些。

一个简单的方法可能类似于 this ，只需将您的个人 data-target 和容器 class 重命名为 popUpMessage(x, y, z)。

话虽如此，您也提到您担心类(class)太多。在这种情况下，您可以使用一些 JavaScript 魔法并在加载页面后动态定义您的类。

编辑: 由于您使用的是 Bootstrap，因此您还可以使用 jQuery 及其 .each() 函数。通过这样做，您可以迭代每个元素(通过选择器指定)并更改其属性，例如 data-target 和 class。

查看this .