Question

我正在编写一些共享模态功能（用户点击一个按钮，我的模态方法抓取一些相关的DOM元素并将其克隆到模态），遗憾的是，在触发器之间的关系中HTML存在一些不一致和内容，例如：

// Sibling

<button class="modal__button">Trigger</button>
<div class="modal__content">Content</div>


// Separated by other elements

<button class="modal__button">Trigger</button>
<div>Other Elements</div>
<div>Other Elements</div>
<div class="modal__content">Content</div>


// Trigger's parent is content's sibling

<div>
    <button class="modal__button">Trigger</button>
</div>
<div class="modal__content">Content</div>


// Argh!

<div>
    <div>
        <button class="modal__button">Trigger</button>
    </div>
</div>
<div>Other Elements</div>
<div>Other Elements</div>
<div>
    <div>
        <div class="modal__content">Content</div>
    </div>
</div>

不幸的是，使用ID创建关系的明显答案对于我的用例是不可能的（因为它们必须是唯一的，并且这些组件可以在单个页面中多次出现，并且每个组件都没有意识到服务器端是否已经添加到页面的透视图，因此无法确保这种唯一性。）

我能看到的唯一方法是，如果我可以将我的模态方法传递给DOM选择器（相对于触发器）作为数据属性，然后让我的模态方法执行此选择器。我还需要确定它的范围，使其相对于按钮触发器。但是，我不确定JavaScript中是否有任何可能的内容？基本上我希望能够像这样编写我的按钮：

<button data-modal-content="this.nextElementSibling">Trigger</button>
<button data-modal-content="this.parentNode.querySelectorAll('modal__content')">Trigger</button>
<button data-modal-content="this.parentNode.nextElementSibling">Trigger</button>

然后让我的模态方法找到选择器。我知道我可以这样使用eval()：

＆＃13;

document.querySelectorAll('[data-modal-content]').forEach(el => {
    el.addEventListener('click', button => {
      const selector = button.target.getAttribute('data-modal-content').replace('this','button.target');
      console.log(eval(selector));
    });
});

＆＃13;

<button data-modal-content="this.nextElementSibling">Trigger</button>
<div>Content</div>

＆＃13;

...但我也意识到相关的安全问题，这意味着我可能不得不清理字符串（我想通过检查它的每个部分只是做选择器之前的东西eval()附近的任何地方。

这是最好的方法，是否有更好的方法来解决这个问题，我没有考虑过？做一些不依赖风险eval（）的选择器的方法是理想的。

Answer 1

我宁愿选择一个更简单的解决方案，只需选择所有模态，然后找到点击按钮后的第一个。

document.querySelectorAll("button.modal__button").forEach(function(b) {
  b.addEventListener("click", clickHandler);
});

function clickHandler() {
  const contents = document.querySelectorAll("div.modal__content");

  const c = Array.from(contents).find(c =>
    this.compareDocumentPosition(c) == Node.DOCUMENT_POSITION_FOLLOWING
  );

  if (c) c.classList.add("found");
  else console.log("Unable to find content from:", this);
}

.found {
  background: red;
  color: white;
}

.modal__content {
  margin: 10px;
  padding: 10px;
  border: 2px solid orange;
}

// Sibling

<button class="modal__button">Trigger</button>
<div class="modal__content">Content</div>


// Separated by other elements

<button class="modal__button">Trigger</button>
<div>Other Elements</div>
<div>Other Elements</div>
<div class="modal__content">Content</div>


// Trigger's parent is content's sibling

<div>
  <button class="modal__button">Trigger</button>
</div>
<div class="modal__content">Content</div>


// Argh!

<div>
  <div>
    <button class="modal__button">Trigger</button>
  </div>
</div>
<div>Other Elements</div>
<div>Other Elements</div>
<div>
  <div>
    <div class="modal__content">Content</div>
  </div>
</div>

另一个解决方案是在单击时为按钮提供临时ID，然后将其包含在内容元素的DOM选择中。这样，您只需要在集合中找到该按钮，并且您将知道该内容是下一个（或上一个），因为结果始终以“文档顺序”返回。

document.querySelectorAll("button.modal__button").forEach(function(b) {
  b.addEventListener("click", clickHandler);
});

function clickHandler() {
  const temp = this.id;
  this.id = generateUniqueId();

  const els = document.querySelectorAll(`#${this.id}, div.modal__content`);

  const idx = Array.from(els).findIndex(el => this.id == el.id);

  this.id = temp;

  if (idx !== -1) {
    const el = this.dataset.position === "before" ? els[idx - 1] : els[idx + 1];
    el.classList.add("found");

  } else console.log("Unable to find content from:", this);
}

function generateUniqueId() {
  do {
    const id = "__temp_id__" + (Math.floor(Math.random()) * Number.MAX_SAFE_INTEGER);
    if (!document.querySelector(id)) return id;
  } while (true);
}

.found {
  background: red;
  color: white;
}

.modal__content {
  margin: 10px;
  padding: 10px;
  border: 2px solid orange;
}

// Sibling

<button class="modal__button">Trigger</button>
<div class="modal__content">Content</div>


// Separated by other elements

<button class="modal__button">Trigger</button>
<div>Other Elements</div>
<div>Other Elements</div>
<div class="modal__content">Content</div>


// Content comes before trigger's parent

<div class="modal__content">Content</div>
<div>
  <button class="modal__button" data-position="before">Trigger</button>
</div>


// Trigger's parent is content's sibling

<div>
  <button class="modal__button">Trigger</button>
</div>
<div class="modal__content">Content</div>


// Argh!

<div>
  <div>
    <button class="modal__button">Trigger</button>
  </div>
</div>
<div>Other Elements</div>
<div>Other Elements</div>
<div>
  <div>
    <div class="modal__content">Content</div>
  </div>
</div>

如何将DOM选择器作为数据属性

1 个答案: