как выбрать конкретный элемент списка из ul javascript

-6

У меня есть функция, которая добавляет элементы списка, которые имеют одинаковый идентификатор для 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>";

}

спросил(а) 2015-04-22T01:05:00+03:00 5 лет, 3 месяца назад
0
56

Когда вы динамически создаете элементы списка, как указывали другие, вы должны указать им разные 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/codyogden/t8xfeL0p/

ответил(а) 2015-04-22T01:39:00+03:00 5 лет, 3 месяца назад
39

Вы не должны использовать один и тот же идентификатор. Вместо этого дайте им все тот же класс. 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

В основном, происходит то, что он ищет все элементы с классом "черный" - он затем перебирает их и добавляет прослушиватель событий, который ищет событие "щелчок" для каждого из них. Когда вы нажмете, цвет фона этого конкретного элемента "это" станет красным.

ответил(а) 2015-04-22T01:21:00+03:00 5 лет, 3 месяца назад
-4

Во-первых, ваш <li> должен содержать кнопки для щелчка и onclick вызвать функцию:

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

В функции вы вызовете объект и используете функцию id для изменения идентификатора и backgroundColor чтобы изменить цвет:

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

ответил(а) 2015-04-22T01:16:00+03:00 5 лет, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема