Question

我在根据链接点击为热图编写代码时遇到了问题。

我有一个带有不同发音的页面。当我点击链接时，artical本身就会打开。现在我想实时跟踪哪个关节点被点击的频率，以便我可以决定哪个关节点与用户相关并将其放置在第一个关节空间等等。

因此我写了一个函数，用计数器跟踪点击并在div中显示它们。现在我的问题是。我不能写20个函数用于计数器，20个用于复位。我希望有一个函数可以决定点击哪个articel并将+1添加到链接的计数器。

我的计数器代码和重置+链接文字在超过5次点击后变为红色。

var count1 = 0;

function heatmap(id) {  
    if(id==1){
        count1++;
        document.getElementById("count1").innerHTML = count1;
    }

    if(count1>=5){
        document.getElementById("link1").style.color = "red";
    }
}

function reset(id){
    if(id==1){
        count1=0;
        document.getElementById("count1").innerHTML = 0;
    }
}

到目前为止我的HTML代码

<div style="text-align:center; font-size:20px; font-family: arial;">
    <div id="link1" onclick="heatmap(1)">This is the first Link</div><br>
    <div id="count1">0</div><br>
    <button onclick="reset(1)">RESET</button>
    <button onclick="save(1)">SAVE</button>
</div>

现在我的主要问题是我只需要一个功能来进行所有链接跟踪。

是否有可能以变量动态的方式编写代码，以便函数可以决定点击哪个链接。

例如：

var count + ID = 0;

function heatmap(ID) {  
        count + ID ++;
        document.getElementById("count" + ID).innerHTML = count+ID;
    }

    if(count + ID >=5){
        document.getElementById("link + ID").style.color = "red";
    }
}

function reset(id){
        count + ID =0;
        document.getElementById("count + ID").innerHTML = 0;
    }
}

我已经搜索了这个主页，并进行了一些谷歌搜索，但我找到的只是使用数组或列表。但我认为这对我来说真的很有用，因为我想给我的函数一个ID，然后将这个id添加到与count + ID = count | count + ID = count2

相同的document.getElementById("count" + ID).innerHTML = count+ID; = document.getElementById("count1").innerHTML = count1;这样的varibale名称中

正如你所看到的链接得到onclick="heatmap(ID)"这个ID将被添加到每个关节链接中，并且将从第一个关节带1转到最后一个关节带，如20个。

如果我更换Articel，计数器将被重置并且ID将被更改为其位置。因此，总会有一个ID可用于计数器的标识符。

Answer 1

您可以遍历所有文章，并在点击文章中的特定按钮后更新或重置的每个元素上存储计数器：

var articles = document.querySelectorAll('article');

for(var i=0; i < articles.length; i++) {
    articles[i].querySelector('.save').addEventListener('click', updateCounter);
    articles[i].querySelector('.reset').addEventListener('click', resetCounter);
    articles[i]['counter'] = 0;
}

function updateCounter(ev) {
    var article = ev.target.parentNode;

    article.counter++;
    article.querySelector('.counter').innerHTML = article.counter;

    /* Some server synchronisation should go here */
}

function resetCounter(ev) {
    var article = ev.target.parentNode;

    article.counter = 0;
    article.querySelector('.counter').innerHTML = article.counter;

    /* Some server synchronisation should go here */
}

DEMO

但要永久存储计数器，您必须将结果与服务器和数据库同步。

如果您只想使用一个功能，您可以像这样实现：

var articles = document.querySelectorAll('article');

for(var i=0; i < articles.length; i++) {
    articles[i].querySelector('.save').addEventListener('click', checkCounter);
    articles[i].querySelector('.reset').addEventListener('click', checkCounter);
    articles[i]['counter'] = 0;
}

function checkCounter(ev) {
    var article = ev.target.parentNode,
        button = ev.target;

    if(button.classList[0] === 'save') {
        article.counter++;
    } else if(button.classList[0] === 'reset') {
        article.counter = 0;
    }

    article.querySelector('.counter').innerHTML = article.counter;
}

DEMO

热门地图链接点击只有一个功能

1 个答案: