как выбрать конкретный элемент списка из ul javascript
У меня есть функция, которая добавляет элементы списка, которые имеют одинаковый идентификатор для ul. Я хочу, чтобы иметь возможность щелкнуть определенный элемент списка и изменить идентификатор только того, на который я нажал.
поэтому я несколько раз вызову функцию и выплюнул:
- вещь 1 thing2 thing3
то когда я нажимаю вещь2, цвет меняется с черного на красный.
edit: в ответ на запрос кода, который я пробовал.
function addlist(){
var ask = prompt("what is the list item", "title");
document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";
}
Когда вы динамически создаете элементы списка, как указывали другие, вы должны указать им разные id="". Я предполагаю, что вы можете реализовать решение, в котором вы обеспечиваете уникальный идентификатор и добавляете атрибут onmousedown на каждый <li>.
HTML
Это предполагает, что вы добавляете атрибут onmousedown для каждого <li> и задали каждому элементу определенный идентификатор.
<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/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
В основном, происходит то, что он ищет все элементы с классом "черный" - он затем перебирает их и добавляет прослушиватель событий, который ищет событие "щелчок" для каждого из них. Когда вы нажмете, цвет фона этого конкретного элемента "это" станет красным.
Во-первых, ваш <li> должен содержать кнопки для щелчка и onclick вызвать функцию:
<input type="button" onclick="functionName(this)">Thing1</input>
В функции вы вызовете объект и используете функцию id для изменения идентификатора и backgroundColor чтобы изменить цвет:
function functionName(obj)
{
obj.id = "new id"
obj.backgroundColor = "red"
}
