Question

我有一个函数可以将所有具有相同id的列表项添加到ul。我希望能够单击特定列表项并仅更改我单击的ID。

因此我会多次调用该函数并将其吐出来：

thing1
thing2
thing3

然后当我点击thing2时，颜色从黑色变为红色。

编辑：响应我尝试的代码请求。

function addlist(){
  var ask = prompt("what is the list item", "title");
  document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";

}

Answer 1

当您动态创建列表项时，正如其他人指出的那样，您应该给它们不同的id=""。我假设您可以实施一个解决方案，确保使用唯一ID并在每个onmousedown上添加<li>属性。

HTML

这假设您为每个onmousedown添加<li>属性，并为每个项目指定了特定的ID。

<ul>
    <li id="theone" onmousedown="changeColor(this.id)">Click 1</li>
    <li id="thetwo" onmousedown="changeColor(this.id)">Click 2</li>
    <li id="thethree" onmousedown="changeColor(this.id)">Click 3</li>
</ul>

的Javascript

function changeColor(id) {
    //Do whatever you want to the specific element
    var listitem = document.getElementById(id);
    listitem.style.backgroundColor = "red";
}

演示：http://jsfiddle.net/codyogden/t8xfeL0p/

Answer 2

您不应该使用相同的ID。而是给他们所有相同的课程。 http://jsfiddle.net/anw66zu7/4/

HTML

<ul>
   <li class="black">One</li>
   <li class="black">Two</li>
   <li class="black">Three</li>
</ul>

的Javascript

window.onload = function() {
//when window loads

  var blackelements = document.getElementsByClassName("black");
// get all elements with class "black" 

  for(var i=0; i < blackelements.length;i++) {
//create a for loop to go through each of these elements.
//the variable i increments until it reaches the amount of elements
//stored in the variable blackelements 

      var blackelement = blackelements[i];
//get the element with the index of the variable i

    blackelement.addEventListener("click",  function() {
//add an event listener to this element that checks for a mouse click

    this.style.backgroundColor = "red";
//if clicked change the background color to red.

    });
//close out of the event listener
  }
//close out of the for loop

}
//close out of the onload function

基本上发生的事情是，它会查找所有带有类＆＃34;黑色＆＃34;的元素。 - 然后循环遍历它们并添加一个事件监听器，用于查找＆＃34; click＆＃34;对他们每个人的事件。当您单击它时，会更改该特定项目的背景颜色＆＃34;此＆＃34;变红了。

Answer 3

首先，您的<li>需要包含点击按钮并onclick调用函数：

<input type="button" onclick="functionName(this)">Thing1</input>

在函数中，您将调用该对象并使用id函数更改ID，并使用backgroundColor更改颜色：

function functionName(obj)
{
obj.id = "new id"
obj.backgroundColor = "red"
}

如何从ul javascript中选择特定的列表项

3 个答案:

HTML

的Javascript