javascript - 如何将 DOM 选择器作为数据属性传递

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() :

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));
    });
});

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

...但我也意识到与之相关的安全问题，这意味着我可能必须清理字符串(我猜通过检查它的每个部分只是在执行选择器 y 在它接近 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>