Как назначить отдельные элементы массива текстам, которые можно стилизовать относительно их изображений? - PullRequest
Новая
       8

Как назначить отдельные элементы массива текстам, которые можно стилизовать относительно их изображений?

0 голосов
/ 23 февраля 2020

Я создал 15 изображений ошибок, и при щелчке по одному из них оно превратится в изображение сплата, а другие ошибки отобразят уникальный комментарий. Я сохранил каждый комментарий в массиве, и при использовании сплайсинга для его удаления я не могу правильно стилизовать комментарии над изображениями ошибок, поскольку их длина меняется. Есть ли способ отобразить каждый уникальный комментарий над каждым изображением ошибки, в то же время имея возможность его стилизовать? Я новичок в js.

Любая помощь приветствуется!

html: 

    <div id ="div1"> 
        <!-- Bug Img -->
        <div id = "bugcomment"> </div>
    </div>

Javascript: 

BUGS = ['bug1', 'bug2', 'bug3', 'bug4', 'bug5', 'bug6', 'bug7', 'bug8', 'bug9'
    , 'bug10', 'bug11', 'bug12', 'bug13', 'bug14', 'bug15'];

BUGS_CONDITION = [true, true, true, true, true, true, true, true, true, true,
    true, true, true, true, true];

LOG = [];          //all comments will be stored here & will be displayed

function createImg()                                        
{   
    var src = "images/fly.png";
    var img = [];

    for (i = 0; i < BUGS.length; i++)
    {
        img[i]= document.createElement("img");
        img[i].setAttribute("id", `${i}`);  

        img[i].setAttribute("onclick", `splatImg(${i})`);
        img[i].src = src;
        document.getElementById("div1").appendChild(img[i]);
    }
}

function rndComment()
{
    for (i = 0; i < BUGS.length;i++)
    {
        rdmBadComm = parseInt(Math.random() * COMMENTS_BAD.length);

        logPerBug[i] = COMMENTS_BAD[rdmBadComm];
    logPerBug[i] = logPerBug[i].replace(logPerBug[i], "<span id = " + ` ${UNIQUE_ID[i]}` + ">" + 
    logPerBug[i] + "</span>");

        delUsedComment(undefined, rdmBadComm);

    }
        if (logPerBug.length == BUGS.length)                
        {

            document.getElementById("bugcomment").style.color = "red";
            return delUsedComment(logPerBug, undefined);
        }
}

function delUsedComment(usedComment, bug)
{
    COMMENTS_BAD.splice(bug, 1);    
    if (usedComment.length == BUGS.length)      
    {
        logPerBug = logPerBug.join(' ');
        bugCommentOutput.innerHTML = logPerBug;
        logPerBug = [];
    }
}
...