如何在模式中重用现有的html元素？

kgsdhlau 于 2021-09-29 发布在 Java

关注(0)|答案(3)|浏览(333)

考虑具有自定义组件的UI <foo> -现在假设它只是文本。

<foo id="foo-id">SOMETEXT</foo>

我想在ui上的两个地方显示此内容-其中一个是模态。如何将模态内容委托给此现有元素？我使用的是开放式jquery/angularjs或原生html解决方案。

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
        ### REFERENCE TO ID #foo-id here ###
      </div>
  </div

我试图避免使用该元素的第二个示例，例如：

<foo id="foo-id">SOMETEXT</foo>

<div class="modal fade" id="exampleModal" ...>
      ...
      <div class="modal-body">
            <foo id="foo-id-2">SOMETEXT</foo>
      </div>
  </div

3条答案

按热度按时间

bjp0bcyl1#

如果您不需要两个副本，您可以尝试分离元素并将其插入新位置

let $fooContent = $("#foo-id");
let $myModal = $("#exampleModal > .modal-body");
...

// set it
$myModal.html( $fooContent.detach() );

// back it
$initialFooContentLocation.append( $fooContent.detach() );

赞(0）回复(0）举报 2021-09-29

wh6knrhe2#

我在vanilla javascript中的做法是创建一个函数，该函数创建一个模态元素，然后将其附加到所需的dom元素，例如body。
例如：

function createModal(modalId, fooElement){
  const modalDiv = document.createElement('div');
  modalDiv.classList.add('modal');
  modalDiv.classList.add('fade');
  modalDiv.id = modalId;

  const modalBodyDiv = document.createElement('div');
  modalBodyDiv.classList.add('modal-body');

  modalBodyDiv.append(fooElement);

  return modalDiv;
}

然后使用它创建n个模态元素，并将它们附加到任何需要的位置，例如主体，如下所示：

const modal1 = createModal('myModal1', fooElement);

document.body.append(modal1)

这样你的html就会更干净。注：此 fooElement 必须是dom元素，否则将抛出错误。希望它能起作用！

赞(0）回复(0）举报 2021-09-29

50few1ms3#

被接受的答案对我有用；然而，为了完整性，这里有另一种方法。
使用 $scope/$rootScope 事件发射器用于在组件之间广播事件。如果组件具有明确的父/子关系， $scope 通常是足够的，如果他们是兄弟姐妹，那么他们可以通过 $rootScope .
因为这是一个angularjs项目，所以我遵循这个简单的指南。

赞(0）回复(0）举报 2021-09-29

我来回答

如何在模式中重用现有的html元素？

更多上下文

3条答案

相关问题

热门标签

最新问答