Возникла проблема с отображением контента через всплывающую подсказку - PullRequest
Новая
       26

Возникла проблема с отображением контента через всплывающую подсказку

0 голосов
/ 15 мая 2019

У меня проблема с реализацией Tooltipster на моем сайте. Я нанес на карту изображение зданий и хотел показать всплывающей подсказке, какое здание продано или нет. Каждое здание имеет свой собственный номер, такой как Building 1, Building 2 и т. Д. В alt (я тоже пробовал с data-name). Проблема в том, что когда я зацикливаюсь на NodeList элементов, всегда получаю последний элемент. Например, у меня есть здания 2, 4 и 7, которые «проданы», я зацикливаюсь на каждом здании из NodeList. Я проверяю с помощью оператора if, если в конкретной области есть класс с именем «продано», если он есть, я даю ему content: "sold" + $(buildingList[i]).attr('data-name'), чтобы подсказка была похожа на «Проданное здание 4».

Я пробовал функции из Tooltipster или делал свое собственное и возвращающее здание с номером для цикла, я также пытался с именами, 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».

1 Ответ

0 голосов
/ 15 мая 2019

Вам не нужен этот условный оператор и цикл не нужен. 

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

выберет все элементы, которые имеют class = "sold", поэтому вам не нужно проверятьимя класса, выполнив некоторые условные циклы.

Просто добавьте некоторую функцию в ваш селектор, которая считывает необходимые значения из вашего HTML до того, как будет создана ваша подсказка, затем передайте эти значения в вашу подсказку.

Например, вы можете добавить 

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

и затем передать переменную в всплывающую подсказку для отображения во всплывающей подсказке, когда она активирована.

Редактировать: Большепример кода

Несколько быстрых и грязных примеров (с использованием встроенной подсказки jQueryUI):

Четыре деления, два разных класса (бесплатные и продаваемые), каждый класс используется в качестве селектора jQuery.Подсказка создается для каждого элемента <p> внутри элементов div.Атрибут данных каждого 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);
            },
    });
});
...