Отображение изображения на основе текста, напечатанного ниже класса - PullRequest
0 голосов
/ 23 февраля 2020

У меня есть javascript, который вставляет изображение (с всплывающей подсказкой) после строки (имя игрока) в зависимости от команды, в которой находится игрок. Я пытаюсь изменить этот код для работы в другом разделе сайта.

Вот пример того, где работает оригинальный код: https://www67.myfantasyleague.com/2020/options?L=51962&O=07

Здесь это JS на этой странице

 $('.player>a, .player>span>a, td>a.position_qb, td>a.position_rb, td>a.position_wr, td>a.position_te').each((_, item) => {
    item = $(item);
    let content = item.html().split(' ');
    let club = content[content.length - 2];
    if (cMap[club] && !item.parent().html().includes(`${club}-tips`)) {
        let image = images[cMap[club].toLowerCase()];
        let imageHTML = $(`<div class="${club}-tips" style="display:inline-block;" > <img  style="margin-left:4px; margin-top:4px" src="data:image/png;base64, ${image}" /></div>`);
        item.parent().append(imageHTML);
        $(`.${club}-tips`).on('mouseover', function (event) {
            $('#club-tips').css({
                "visibility": "visible",
                "top": `${event.pageY + 10}px`,
                'left': `${event.pageX}px`
            }).html(`<img  style="margin-left:4px; margin-top:4px" src="data:image/png;base64, ${tips[cMap[club].toLowerCase()]}"/>`)
        }).on('click', function (event) {
            $('#club-tips').css({
                "visibility": "visible",
                "top": `${event.pageY}px`,
                'left': `${event.pageX}px`
            }).html(`<img  style="margin-left:4px; margin-top:4px" src="data:image/png;base64, ${tips[cMap[club].toLowerCase()]}"/>`)
        }).on("mousemove", function () {
            $('#club-tips').css({
                "visibility": "visible",
                "top": `${event.pageY}px`,
                'left': `${event.pageX}px`
            })
        })

            .on("mouseout", function () {
                $('#club-tips').css({
                    "visibility": "hidden"
                })
            })
    } else {
        console.log("Image for club not found : ", club)
    }
})

НО на странице Я хочу вставить изображение, класс и класс td разные И имя команды напечатано под классом. Например:

<td class="td-first-type"><a href="player?L=51962&amp;P=11192" target="new" class="reallysmall" title="View Player News">Bell,&nbsp;Le'Veon</a>
<br>NYJ RB
<td class="ls_player_stats"><div class="stats_11192 reallysmall"><span class="ls-no-stats">-</span></div></td></td>

Так как я могу нацелиться на "NYJ", используя JS, который у меня уже есть? Для справки вот ссылка playcode.io https://playcode.io/505447 (соответствующая часть JS начинается со строки 1842). Я не смог заставить HTML / CSS / JS работать с фрагментом кода Stack Overflow.

Вот макет, где я пытаюсь вставить изображение

Любая помощь или руководство с благодарностью. Ура!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...