如何更新 jBox？

Question

我有一个表单使用 jBox 为工具提示中的某些字段提供附加信息。显示的文本取决于最近的 select 标签的值。 jBox 在 PageLoad 上执行（我创建了一个 jBox，它使用 data-属性来获取标题和内容），然后我更新 data-attributes 以响应 change-事件 select-控制.

不幸的是，这不起作用，工具提示保持初始值。

我有一个带有工具提示的 cut-down 重现，它说明了未更新的行为（alert 用于显示 data 属性的实际值 change-event)

$(function() {
  $("[data-jbox-content]").jBox("Tooltip", {
    theme: "TooltipDark",
    id: "jBoxTooltip",
    getTitle: "data-jbox-title",
    getContent: "data-jbox-content"
  });
});

<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>


<body>
<table>
  <tbody>
    <tr>
      <th>Variable</th>
      <th colspan="2">Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><label for="dt1">Car</label></td>
      <td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').data('jbox-title','blabla');$('#infoCar').data('jbox-content','dummy');alert($('#infoCar').data('jbox-title')+' / ' + $('#infoCar').data('jbox-content'))">
          <option>Key</option>
          <option selected="selected">Boolean</option>
          <option>Ordinal</option>
          <option>Nominal</option>
          <option>Interval</option>
          <option>Ratio</option>
        </select>
      </td>
      <td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
          <i class="fas fa-info-circle"></i></span></td>
      <td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
    </tr>
    <tr>
      <td><label for="dt2">Age</label></td>
      <td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').data('jbox-title','blabla');$('#infoAge').data('jbox-content','dummy');alert($('#infoAge').data('jbox-title')+' / ' + $('#infoAge').data('jbox-content'))">
          <option>Key</option>
          <option>Boolean</option>
          <option>Ordinal</option>
          <option>Nominal</option>
          <option selected="selected">Interval</option>
          <option>Ratio</option>
        </select>
      </td>
      <td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
          <i class="fas fa-info-circle"></i></span></td>
      <td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
    </tr>
  </tbody>
</table>

</body>

Answer 1

对于 jQuery 如何使用 .data() 和 .attr() 方法存在一个常见的误解。

.data() 向元素本身添加一些内部数据，不会设置属性。

要设置 data-xxx 属性，您需要使用 .attr()。在此处查看更多信息：https://api.jquery.com/attr/

另外，查看更新的代码段：

$(function() {
  $("[data-jbox-content]").jBox("Tooltip", {
    theme: "TooltipDark",
    id: "jBoxTooltip",
    getTitle: "data-jbox-title",
    getContent: "data-jbox-content"
  });
});

<link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.0.5/dist/jBox.all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.0.5/dist/jBox.all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>


<body>
<table>
  <tbody>
    <tr>
      <th>Variable</th>
      <th colspan="2">Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><label for="dt1">Car</label></td>
      <td><select id="dtCar" class="form-control select2 font-fas" name="dtCar" onchange="$('#infoCar').attr('data-jbox-title','blabla');$('#infoCar').attr('data-jbox-content','dummy');">
          <option>Key</option>
          <option selected="selected">Boolean</option>
          <option>Ordinal</option>
          <option>Nominal</option>
          <option>Interval</option>
          <option>Ratio</option>
        </select>
      </td>
      <td><span id="infoCar" data-jbox-content="This field can have one of two values: On or Off, Yes or No, 1 or 0." data-jbox-title="Description of the Boolean Scale">
          <i class="fas fa-info-circle"></i></span></td>
      <td><input id="inCar" class="form-control" name="inCar" type="text" value="Do you own a car?"></td>
    </tr>
    <tr>
      <td><label for="dt2">Age</label></td>
      <td><select id="dtHouse" class="form-control select2 font-fas" name="dtAge" onchange="$('#infoAge').attr('data-jbox-title','blabla');$('#infoAge').attr('data-jbox-content','dummy');">
          <option>Key</option>
          <option>Boolean</option>
          <option>Ordinal</option>
          <option>Nominal</option>
          <option selected="selected">Interval</option>
          <option>Ratio</option>
        </select>
      </td>
      <td><span id="infoAge" data-jbox-content="This field can values from a defined interval, i.e. 0..200" data-jbox-title="Description of the Interval Scale">
          <i class="fas fa-info-circle"></i></span></td>
      <td><input id="inHouse" class="form-control" name="inAge" type="text" value="How old are you?"></td>
    </tr>
  </tbody>
</table>

</body>

如何更新 jBox？

How to update jBoxes?

jbox