Question

我正在使用开源js库Cesium。在这个js中，一个类被定义为一个空数组[]的容器。推送用于添加到此阵列。 HTML将整个容器显示为画布。我想为数组的每个项目使用jquery添加工具提示，但不知道如何操作。我可以为容器添加工具提示，但不能为容器中的项目添加工具提示在下面的代码中，类＆＃34; cesium-timeline-tracks＆＃34;是我感兴趣的那个。

请帮忙。下面是代码的snipet：

Javascript文件：

    function Timeline(container, clock) {
    container = getElement(container);

    this.container = container;

    var topDiv = document.createElement('div');
    topDiv.className = 'cesium-timeline-main';
    container.appendChild(topDiv);
    this._topDiv = topDiv;

    this._topDiv.innerHTML = '<div class="cesium-timeline-trackContainer">' +
    '<canvas class="cesium-timeline-tracks" width="10" height="1">' +
    '</canvas></div><div class="cesium-timeline-bar"></div><div class="cesium-timeline-needle"></div><span class="cesium-timeline-ruler"></span>';

    this._trackContainer = this._topDiv.childNodes[0];
    this._trackListEle = this._topDiv.childNodes[0].childNodes[0];
    this._timeBarEle = this._topDiv.childNodes[1];
    this._needleEle = this._topDiv.childNodes[2];
    this._rulerEle = this._topDiv.childNodes[3];
    this._context = this._trackListEle.getContext('2d');

    this._trackList = [];
    this._highlightRanges = [];

使用push：

添加数组中的每个项目

Timeline.prototype.addTrack = function(interval, heightInPx, color, backgroundColor) {
    /* EN added parameter id*/
    var newTrack = new TimelineTrack(interval, heightInPx, color, backgroundColor);
    this._trackList.push(newTrack);
    this._lastHeight = undefined;
    this.resize();
    return newTrack;
};

要添加项目，我只需要调用timeline.addTrack（...）; 下面是我如何将它用于cesium-timeline-tracks类，但我想用于我在数组_trackList中的项目。请帮忙。

    $(document).ready(function() {
    $(".cesium-timeline-tracks").attr("title", "This is a tooltip for the timetracks.");
    $(document).tooltip({
        position: {
        my: "left bottom-20",
        at: "left top"
        }
    });
});

实施Ted的建议，但仍未显示每个项目，仅显示整个容器。下面是代码。请注意，之前创建了时间轴变量，它是一个时间轴容器（未在代码中显示）。我尝试了viewer.timeline._trackList，但这导致工具提示一起消失。

$(document).ready(function() {
     //$(".cesium-timeline-tracks").attr("title", "This is a tooltip for the timetracks.");
    $.each(viewer.timeline, function (index, element) {
        $(element).attr("title", "tooltip for " + index);
        $(element).tooltip ({
            position: {
            my: "left bottom-20",
            at: "left top"
            }
        });
    });
});

将viewer.timeline更改为.each中的viewer.timeline._trackList，得到了errortype＆＃34; d.addEventListener不是函数＆＃34;在jquery-1.11.0.min.js中。控制台将索引0显示为[object Object]。

$(document).ready(function() {
    $.each(viewer.timeline._trackList, function (index, element) {
      console.log("****** the index " + index + " is " + element + ".");
$(element).attr("title", "tooltip for " + index);
    $(element).tooltip ({
        position: {
                  my: "left bottom-20",
            at: "left top"
            }
        });
    });
});

控制台上的输出：索引0是[object Object]。

Answer 1

在不了解Cesium的情况下，我的第一印象是用$.each迭代数组...

$.each(Timeline._trackList, function(index, element){

      $(element).tooltip ...

});

jQuery .each Docs

如何在javascript中访问类中的数组项

1 个答案: