如何使用存储在其他元素中的内容？

Question

我正在尝试使用数据属性创建多个 jBox，并且我想为它们提供来自其他元素的内容。

我假设这是不可能的（开箱即用），所以我使用了一个 data-jbox-content-from 属性，它应该指向包含内容的元素。但我现在很困惑：我知道我应该只创建一个 jBox - 但我不知道这是如何做到的，另一方面我需要对每个元素进行不同的调用来提供内容？

为了证实我的不确定性...fiddle 不工作。所以我希望有人会找到一种方法来解决我在 "ugly" 方法中的错误（eaching 在控件上）或更聪明地使用 JS/jBox.

$("[data-jbox-content-from]").each(function() {
  new jBox("Tooltip", {
    theme: "TooltipDark",
    id: "jBoxTooltip_" + $(this).attr("id"),
    getTitle: "data-jbox-title",
    content: $($(this).attr("data-jbox-content-from")),
    attach: "#" + $(this).attr("id")
  }).attach();
});

完成fiddlehere

Answer 1

你的做法是正确的。但是您需要将您的代码放入 domready:

$(document).ready(function () {
  $("[data-jbox-content-from]").each(function() {
    new jBox("Tooltip", {
      theme: "TooltipDark",
      id: "jBoxTooltip_" + $(this).attr("id"),
      getTitle: "data-jbox-title",
      content: $($(this).attr("data-jbox-content-from")),
      attach: "#" + $(this).attr("id")
    });
  });
});

另请注意，我在 new jBox 之后删除了 .attach() 方法。 jBox 在初始化时会这样做。

查看更新 fiddle：https://jsfiddle.net/StephanWagner/kqgxcda1/1/

如何使用存储在其他元素中的内容？

How to use content that's stored in other elements?

jbox