通过Tooltipster映射内容有问题

Question

我在网站上实现工具的问题有问题。我已经用建筑物绘制了图像，并希望与工具提示一起展示哪个建筑物的出售。每个建筑物都有自己的号码，例如ALT中的1号建筑物，2号建筑物等(我也尝试使用数据名称(。问题是，当我在元素的节点上循环时，请始终获得最后一项。例如，我有2号建筑物，4号建筑物和7号建筑物，这些建筑物已出售，我正在绕着Nodelist的所有建筑物循环。我正在检查是否要陈述特定区域是否在"卖出"的内部，如果有的话，我会给他content: "sold" + $(buildingList[i]).attr('data-name')，以制作"卖出4号建筑物"的工具提示。

我已经尝试了工具转台的功能或用数字循环的返回建筑物，我还尝试了命名，alt。我不知道该怎么办。

var buildingStatus = document.querySelectorAll("area");
for(var i = 0; i<buildingStatus.length; i++){
    if(buildingStatus[i].classList.contains('free') === true){
        $(buildingStatus[i]).data('maphilight',{
            fill: true,
            fillColor: '00ff00',
            fillOpacity: 0.6,
            stroke: true,
            strokeColor: '00ff00',
        }); 
        $('.free').tooltipster({
            theme: 'tooltipster-punk',
            multiple: true, 
            contentAsHTML: true,
            content: "free" + $(buildingStatus[i]).alt(),
        });   
    }
    else if (buildingStatus[i].classList.contains('sold') === true){
        $(buildingStatus[i]).data('maphilight',{
            fill: true,
            fillColor: 'ff0000',
            fillOpacity: 0.6,
            stroke: true,
            strokeColor: 'ff0000',
        }); 
        $('.sold').tooltipster({
            theme: 'tooltipster-punk',
            multiple: true,
            onlyOne: true,
            contentAsHTML: true,
            content: "sold"+
            $(buildingStatus[i]).attr('data-name'),
        }); 
    }
}

希望为每个建筑物的数字提供工具提示。它总是从列表中获得最后一个数字，例如，每座带有"已销售"的建筑物获得"卖出7号建筑物"。

Answer 1

您不需要该条件语句，也不需要循环。

$('.sold').tooltipster({...});

将选择所有具有class ="已出售"的元素，因此您不必通过进行一些有条件的循环来检查类名。

只需在创建之前从您的html 中读取所需值的选择器添加一些函数，然后将这些值传递给工具提示。

例如，您可以添加

var name = $(this).attr('data-name');

，然后将变量传递给工具提示，以在激活工具提示内显示该变量。

编辑：更多示例代码

一些快速而肮脏的示例(使用jqueryui本机工具提示(：

四个Divs，两个不同的类(免费和出售(，每个类用作jQuery选择器。为Divs内部的每个<p>元素创建工具提示。每个DIV的数据属性都分配给变量，然后将其插入工具提示文本。如您所见，它没有使用任何循环或条件。

html：

<div data-stuff="Some data for sold building" class="sold">
    <p>Some sold building</p>
</div>
<div data-stuff="More data for another sold building" class="sold">
    <p>Another sold building</p>
</div>
<div data-stuff="Some data for a free building" class="free">
    <p>Some free building</p>
</div>
<div data-stuff="More data for another free building" class="free">
    <p>Another free building</p>
</div>

jQuery：

$(function(){
    $(".free").tooltip({
        track: true,
        items: "p",
        content: function(){
            var text = $(this).parent().attr("data-stuff");
            return "<div class='tooltipfree'>"+text+"</div>";
        },
    });
});
$(function(){
    $(".sold").tooltip({
        track: true,
        items: "p",
        content: function(){
            var text = $(this).parent().attr("data-stuff");
            return "<div class='tooltipsold'>"+text+"</div>";
        },
    });
});

这个示例的小CSS：

.sold {
  background: #ff9999;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid black;
  margin: 10px;
 }
.free {
  background: #99ff99;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid black;
  margin: 10px;
 }
.tooltipfree {
  background: #99ff99;
  border: 1px solid black;
  width: 70px;
}
.tooltipsold {
  background: #ff9999;
  border: 1px solid black;
  width: 70px;
}

编辑：Tooltipster代码

我刚刚查看了Tooltipster文档，然后尝试了一些更简单的方法，并且它起作用(在本地服务器上，而不是在Codepen.io上(：

$(function(){
    $(".free").tooltipster({
        functionBefore: function (instance, helper) {
            var text = $(helper.origin).closest(".free").attr("data-stuff");
            instance.content(text);
            },
    });
});
$(function(){
    $(".sold").tooltipster({
        functionBefore: function (instance, helper) {
            var text = $(helper.origin).closest(".sold").attr("data-stuff");
            instance.content(text);
            },
    });
});