Question

我有一个索引页面，它有以下子div（在运行时填充，如果这很重要）：

<div id="editProductContainer" class="collapse" data-bind="with: ItemForEditing">
    @Html.Action("Edit", "Products")
</div>

渲染后的内容如下：

<div id="editProductContainer" class="collapse" data-bind="with: ItemForEditing"> 
  <div id="showChildContainer" class="modal fade" role="dialog">
    <div class="col-md-2" style="position: fixed; top: 10px; left: 40%;">
       <div class="form-group" style="margin-top: 23px; margin-bottom: 15px;">
          <div class="col-md-12">
             <div class="panel panel-success">
                ...
             </div>
          </div>
       </div>
    </div>
</div>

在模态上调用bootstrap的.modal('show')时，它按预期工作，弹出应该的位置。但是，如果我在索引页面上方添加另一个div，则为：

<div style="display: none" id="viewProductContainer" class="collapse">
  <div id="showChildContainer" class="modal fade" role="dialog">
    <div class="col-md-2" style="position: fixed; top: 10px; left: 40%;">
       <div class="form-group" style="margin-top: 23px; margin-bottom: 15px;">
          <div class="col-md-12">
             <div class="panel panel-success">
                ...
             </div>
          </div>
       </div>
    </div>
</div>

<div id="editProductContainer" class="collapse">
  <div id="showChildContainer" class="modal fade" role="dialog">
    <div class="col-md-2" style="position: fixed; top: 10px; left: 40%;">
       <div class="form-group" style="margin-top: 23px; margin-bottom: 15px;">
          <div class="col-md-12">
             <div class="panel panel-success">
                ...
             </div>
          </div>
       </div>
    </div>
</div>

这会导致第一个div中的模态正常工作（如果可见），而第二个div中的模式只显示背景（灰色背景），而不实际显示模态。任何帮助将不胜感激。

编辑： 好吧当然有！ div的元素与它们的ID一起呈现，当jQuery查找ID为showChildContainer的第一个元素时，它将计算在内。但是，我怎么能解决这个问题呢？我确保这两个ID永远不可见。

Answer 1

毕竟，问题是＆＃34;如何处理重复的ID，当知道两者不会同时出现时＃34;。答案在这里：jQuery - Selector for duplicate ID's

display：none和实际上没有写标记有区别吗？

1 个答案: