Обновление нескольких идентификаторов в Javascript

Я обновляю немного текста на странице, используя <SPAN ID="idName"> на основе идентификатора выбора раскрывающегося списка, но изменяется только первый идентификатор элемента. Используя работу с разными ID, но надеялся, что есть более легкое решение. Я использую twitter-bootstrap-3 для моего выпадающего меню.Обновление нескольких идентификаторов в Javascript

Вот HTML:

<ul class="nav nav-pills"> 
<li class="dropdown menu-btn"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" > 
     <span class="glyphicon glyphicon-map-marker"></span> <span id="SelectName"></span><b  class="caret"></b></a> 
    <ul id="myCitylist" class="dropdown-menu"> 
     <li> <a href="#">San Jose</a> </li> 
     <li> <a href="#">Silicon Valley</a> </li> 
     <li> <a href="#">New York City</a> </li> 
     <li> <a href="#">Paris</a> </li> 
     <li> <a href="#">Silicon Valley</a> </li> 
     <li> <a href="#">Tokyo</a> </li> 
    </ul> 
</li> 
</ul> 

Now we'll talk about <span id="SelectName"></span>

и Javascript

document.getElementById("SelectName").innerHTML = "San Francisco"; 

$('#myCitylist li').on('click', function(){ 
    document.getElementById("SelectName").innerHTML = $(this).text(); 

}); 

document.getElementById("SelectName").innerHTML = "San Francisco";

Вот код: http://jsfiddle.net/ub1g7fw6/

источник

2014-12-30 Vivek Kumar

"id" атрибуты должны быть уникальными на странице. – Pointy

получил то, что с моими экспериментами, но надеясь, что будет более простое решение, а затем просто с помощью множества разных идентификаторов. –

@VivekKumar: используйте классы, например:

– RahulB

id «s может быть использован только один раз на странице. Вы можете сделать это с помощью class вместо:

HTML

<ul class="nav nav-pills"> 
    <li class="dropdown menu-btn"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" > 
     <span class="glyphicon glyphicon-map-marker"></span> 
     <span class="update">San Francisco</span><b class="caret"></b> 
     </a> 
     <ul id="myCitylist" class="dropdown-menu"> 
     <li> <a href="#">San Jose</a> </li> 
     <li> <a href="#">Silicon Valley</a> </li> 
     <li> <a href="#">New York City</a> </li> 
     <li> <a href="#">Paris</a> </li> 
     <li> <a href="#">Silicon Valley</a> </li> 
     <li> <a href="#">Tokyo</a> </li> 
     </ul> 
    </li> 
</ul> 

<div>Now we'll talk about <span class="update">San Francisco</span></div>

$('.dropdown-menu').on('click', "li", function(){ 
    var optionChosen = $(this).text(); 
    $(this).closest("ul.nav.nav-pills").find("span.update").text(optionChosen).end().next().find("span.update").text(optionChosen); 
});

FIDDLE

источник

2014-12-30 16:05:33 jmore009

Вы ищете классов в этом случае, хотя сочетание классов и идентификаторов может многое сделать Полегче. Например, вы могли бы пожелать стилизовать все элементы списка, чтобы иметь большой размер шрифта (классы, используемые здесь), но для функции javascript требуется только один из них (здесь используются ID).

Следующий пример - образовательный пример.

HTML

<ul class="nav nav-pills"> 
<li class="dropdown menu-btn"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" > 
     <span class="glyphicon glyphicon-map-marker"></span> <span id="SelectName"></span><b  class="caret"></b></a> 
    <ul id="myCitylist" class="dropdown-menu"> 
     <li class="large-text" id="red-hover"> <a href="#">San Jose</a> </li> 
     <li> <a href="#">Silicon Valley</a> </li> 
     <li class="large-text"> <a href="#">New York City</a> </li> 
     <li> <a href="#">Paris</a> </li> 
     <li class="large-text"> <a href="#">Silicon Valley</a> </li> 
     <li> <a href="#">Tokyo</a> </li> 
    </ul> 
</li> 
</ul>

CSS

.large-text 
{ 
    font-size: larger; 
}

JQuery (Javascript)

$("#red-hover").on({ 
    mouseenter: function() 
    { 
     $(this).css("color", "red"); 
    }, 
    mouseleave: function() 
    { 
     $(this).css("color", "black"); 
    } 
}); 

Now we'll talk about <span id="SelectName"></span>

Fiddle

Это означает, что одна и та же логика также работает для javascript, то есть вы можете настроить свой скрипт на таргетинг на все элементы с предоставленным классом, например. установите свой идентификатор красного цвета как класс, преобразов префикс # в a. префикс в javascript/css и, конечно, задание класса «красным» и удаление ссылки на идентификатор «красный-hover» в вашем HTML.

источник

2014-12-30 16:33:03

Обновление нескольких идентификаторов в Javascript

ответ

Смежные вопросы