根据条件（for 循环）向工具提示添加多文本 - Javascript

Question

在下面的项目中，我有 array_num[] 保存文本区域的行号（我要检测的错误的行号）因为我正在将文本区域构建为代码编辑器。 数组[]保存错误的描述。单击按钮时一切正常。但问题是有时我会在与附加示例相同的行中出现三个错误。换句话说，我想在工具提示的同一行显示 3 个文本。我附上了代码。

 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        indentUnit: 4,
        gutters: ["CodeMirror-lint-markers"],
    });

    function makeMarker(text) {
        var marker = document.createElement("div");
        const child = document.createElement('div');
        child.setAttribute('data-tooltip', text);
        child.innerText = "⚠️";
        marker.appendChild(child);


        //   marker.innerHTML = "<div data-tooltip=\"" + text+"\" >⚠️</div>";
        return marker;
    }

    function Add() {
        var array_num = [1, 1,1, 3, 4]
    var array = ["Error 1 - the reasons is .... ", "Error 2 - the reasons is .... ", "Error 3- the reasons is ....", "Error 4 - the reasons is ....","Error 5 - the reasons is ...."];
        for (let i = 0; i < array_num.length; i++) {
            editor.doc.setGutterMarker(array_num[i] - 1, "CodeMirror-lint-markers", makeMarker(array[i]));
       

        }



        // editor.doc.setGutterMarker(2-1, "CodeMirror-lint-markers", makeMarker("Hellow world 2 this is error 2 "));
        // editor.doc.setGutterMarker(2-1, "CodeMirror-lint-markers", makeMarker("Hellow world 3 this is error 3"));
        // editor.doc.setGutterMarker(4-1, "CodeMirror-lint-markers", makeMarker("Hellow world 2 this is error 4"));
    }

    function Remove() {

        editor.doc.clearGutter('CodeMirror-lint-markers');
    }

[data-tooltip]:before {
        /* needed - do not touch */
        content: attr(data-tooltip);
        position: absolute;
        opacity: 0;

        /* customizable */
        transition: all 0.15s ease;
        padding: 10px;
        color: #333;
        height: auto;
        width: 160px;
        /* border-width: 10px; */
        box-shadow: 2px 2px 1px silver;
    }

    [data-tooltip]:hover:before {
        /* needed - do not touch */
        opacity: 1;

        /* customizable */
        background: yellow;
        /* margin-top: -50px; */
        margin-left: 30px;
    }

    [data-tooltip]:not([data-tooltip-persistent]):before {
        pointer-events: none;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"
        integrity="sha512-/8pAp30QGvOa8tNBv7WmWiPFgYGOg2JdVtqI8vK+xZsqWHnNd939v9s+zJHXZcJe5wPD44D66zz+CLTD3KacYA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css"
        integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <textarea id="code" name="code" placeholder="Code goes here...">
        mycode
            pass
        
        a__ = 5
        Check 
        Hello World
        123456
    </textarea>

    <br>

    <button onclick="Add()">Add All</button>
    <br>
    <button onclick="Remove()">Remove All</button>

</body>

</html>

期望的结果是，当鼠标悬停在第 1 行时，我希望看到如下三个不同的文本。

错误 1 - 原因是....

错误 2 - 原因是....

错误 3 - 原因是....

Answer 1

为了解决这个问题，您需要在渲染标记之前构建错误消息数组，并将所有错误消息与“\n”连接在一起：

function Add() {
    var array_num = [1, 1, 1, 3, 4]
    var array = ["Error 1 - the reasons is .... ", "Error 2 - the reasons is .... ", "Error 3- the reasons is ....", "Error 4 - the reasons is ....","Error 5 - the reasons is ...."];
    var err_messages = {};
    for (let i = 0; i < array_num.length; i++) {
        var lineErr = array_num[i];
        if(err_messages[lineErr]){
            err_messages[lineErr]=err_messages[lineErr] + '\n' + array[i];
        }else{
            err_messages[lineErr]=array[i];
        }
    }
    var err_messages_to_arr = Object.values(err_messages);
    
    for (let i = 0; i < err_messages_to_arr.length; i++) {
        editor.doc.setGutterMarker(i + 1, "CodeMirror-lint-markers", makeMarker(err_messages_to_arr[i]));
    }
}

根据条件（for 循环）向工具提示添加多文本 - Javascript

add multi text to tooltip based on condition (for loop) - Javascript

javascript

codemirror