Question

我正在处理一个简单的用户输入表单，用户将其ID，名字和姓氏输入3个单独的输入框。我的主要目标是获取用户输入的数据，将其添加到“person”对象，并显示为无序列表。我已经想了很多。

我现在要做的是，使用鼠标悬停功能以某种方式设置动态创建的列表项的内容。我一直在尝试简单的颜色更改，但我用javascript超级生锈，并且必须在没有任何jQuery的情况下执行此操作。任何帮助表示赞赏。只需要向正确的方向推进，由于某种原因无法让鼠标悬停工作。

这是我到目前为止所得到的：

<form>
ID Number:<br>
<input type="text" id="idNumber">
<br>
First name:<br>
<input type="text" name="firstName" id="fName">
<br>
Last name:<br>
<input type="text" name="lastName" id="lName">
</form>
<br>
<button type ="submit" onclick="myFunction(list)">Submit</button>
<div id = "container">
<ul id="list"></ul>
</div>


<script>
function myFunction(list){
var text = "";
var person = {idNo:"", firstName:"", lastName:""};
var inputs = document.querySelectorAll("input[type=text]");
for (var i = 0; i < inputs.length; i++) {
    idNo = inputs[0].value;
    firstName = inputs[1].value;
    lastName = inputs[2].value;

    text = " "+idNo+" "+firstName+" "+lastName;
}
var li = document.createElement("li");
li.addEventListener("mouseover", mouseOver, false);
li.addEventListener("click", mouseClick, false);
var node = document.createTextNode(text);
li.appendChild(node);
document.getElementById("list").appendChild(li);
}

function mouseOver(){
li.style.backgroundColor="red";
}
</script>

Answer 1

li未在函数mouseover使用this中定义 - ＆gt; this.style.backgroundColor = "red";

变量是在函数范围定义的，因此var li中可以使用myFunction，但mouseover函数中不能使用function myFunction(list) { var text = ""; var person = { idNo: "", firstName: "", lastName: "" }; var inputs = document.querySelectorAll("input[type=text]"); for (var i = 0; i < inputs.length; i++) { idNo = inputs[0].value; firstName = inputs[1].value; lastName = inputs[2].value; text = " " + idNo + " " + firstName + " " + lastName; } var li = document.createElement("li"); li.addEventListener("mouseover", mouseOver, false); //li.addEventListener("click", mouseClick, false); var node = document.createTextNode(text); li.appendChild(node); document.getElementById("list").appendChild(li); } function mouseOver() { this.style.backgroundColor = "red"; }。

试试这个罪行：

＆＃13;

<form>
  ID Number:
  <br>
  <input type="text" id="idNumber">
  <br>First name:
  <br>
  <input type="text" name="firstName" id="fName">
  <br>Last name:
  <br>
  <input type="text" name="lastName" id="lName">
</form>
<br>
<button type="submit" onclick="myFunction(list)">Submit</button>
<div id="container">
  <ul id="list"></ul>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

为什么在使用CSS时使用JS？

JavaScript的：

.my-li-class:hover {
    background-color: red;
}

CSS：

function mouseOver() {
    this.style.backgroundColor = 'red'
}

无论如何，如果你想知道为什么你的JS没有工作，因为li变量是在mouseOver函数范围之外定义的，那就改为：

function mouseOver(evt) {
    evt.target.backgroundColor = 'red'
}

或事件（如果李有孩子，可能无效）：

{{1}}

鼠标悬停功能动态创建列表项

2 个答案: