根據元素的類別顯示工具提示文本

Question

我在類“ tooltipX”的span元素內包裹了一些單詞，其中“ X”是一個數字。 數字隨數組“ Data”一起增長，該數組包含工具提示的描述。 如何顯示正確元素的描述？ 我希望使用類似下面的代碼，但是我不知道如何循環它。

$( document ).tooltip({
items: ".tooltip"+X+"",
content: Data[X].desc
});

的jsfiddle

Answer 1

您可以擴大類別並選擇所有類別，而不是使用特定的類別。 另外，使用data-*屬性存儲要用於工具提示的Data的索引。 因此，更改您的HTML以遵循以下步驟：

<span class="tooltip" data-tooltip-index="0">

（顯然更改每個跨度的data-tooltip-index值）

另外，您可以傳遞函數 ，而不是將字符串傳遞給content ，而是讓它動態返回所需Data中的特定項目。 每當需要顯示工具提示時，就會執行此函數，並將返回值用作其內容。 在此函數中，您將獲得元素的data-tooltip-index值（使用this ），並從Data獲得相應的數組值。 因此，將您的JavaScript更改為此：

$(document).tooltip({
    items: ".tooltip",
    content: function () {
        var index = $(this).attr("data-tooltip-index");
        return Data[index].desc;
    }
});

DEMO

---

參考文獻：

• 工具提示content選項
• data-*屬性
• jQuery.attr