Question

我有两个问题，已经花了几个小时试图修复它们而没有成功。首先，对于我正在创建的游戏，当我将鼠标移到玩家名称的“ div”上时，我必须使日期显示为“ div”。对我来说，指定这些“ div”是在inner.HTML中创建然后将它们存储在localStorage中可能对我很有用。其次，我想用“排序”方法按得分顺序（最好在第1位）对球员排名。但是我的方法不起作用。谢谢您的帮助。

function displayDate(){
    if(dom.theDate.style.display == "none"){
    dom.theDate.style.display = "inline-block";
    }else {
        dom.theDate.style.display = "none";
    }
}
function createHSHTML() {
    toAppend = '';
    arr.forEach(function (player, i) {
        toAppend += ` <div id="player">
                <div id="theDate" style = "display:none">(${dateText})</div>
                <div id="playerScore" style = "display:inline-block">${player.rankedScore} -</div>
                <div onmouseover = "displayDate()" id = "playerName" style = "display:inline-block">${player.rankedName}<br></div>  
                </div>`;
    })
    dom.players.innerHTML = toAppend;
}

arr.sort((a, b) => (b.player.rankedScore) - (a.player.rankedScore));

Answer 1

第一个问题：

HTML spec要求ID属性在页面中是唯一的：

此属性为元素分配名称。这个名字必须是唯一的在文档中。

如果您有多个具有相同ID的元素，则您的HTML 无效。

因此，您可以将forEach循环的迭代器“ i”与所需的div ID（例如“ player $（i）”）之类的名称连接起来。

然后，当调用函数displayDate()时，您将有多个选项来检索正确的div的名称，您可以将'i'传递给该函数，这样您就知道需要编辑哪个div了。就像：

function displayDate(i){
    ...
}

<div onmouseover = "displayDate($(i))"...

请使用document.getElementById("myDiv")

第二个问题：

对我来说，像这样的事情：arr.sort(function(a, b){return a.rankedScore - b.rankedScore});
完成任务！

我的鼠标悬停并且我的功能无法正常工作

1 个答案: