Javascript, чтобы изменить класс элемента

Question

Это сильно обрезанный исходный код с веб-страницы, над которой я сейчас работаю.

<!--// GRID ENTRY //--> 
    <li class="entry" id="sjDDulC8wt"> 
     <div class="entry_actions"> 
      <ul class="entry_actions"> 
       <li class='have_it'> 
<a href='javascript: haveItem("name", "id", "none")' target='_self' title='Have It' class='have_it'>%</a></li> 
      </ul> 
     </div> 
    </li> 

Внутри функции haveItem() Я пытаюсь изменить класс <a> элемента из «have_it» до «have_it выбранного», чтобы изменить внешний вид элемента. Причиной для id является то, что у меня есть десятки этих элементов на странице. Javascript В настоящее время я использую это:

var targetA = document.getElementbyID(sjDDulC8wt).getElementsbyTitle("Have_it"); 
targetA.removeClass("have_it").addClass("have_it selected"); 

Когда я щелкаю по ссылке, функция haveItem() работает, но это не меняет класс. Как я могу изменить свой сценарий так, чтобы щелчок по ссылке изменил класс?

Answer 1

Я предполагаю, что вы используете jQuery, поскольку используете removeClass() и addClass. В противном случае я бы порекомендовал вам ссылку на jQuery, чтобы код ниже работал или придерживался только JavaScript.

var targetA = $('#sjDDulC8wt .have_it'); 
targetA.addClass('selected'); 

На будущее, вот некоторые вещи о вашем коде, вы можете улучшить:

1. getElementById() принимает идентификатор элемента, который вы хотите получить в виде строки. В принципе, вы должны обернуть свой идентификатор в ' или "
2. Будьте осторожны, когда вы помещаете пробелы и символы подчеркивания. Это не одно и то же. Ваш элемент списка имеет название Have It, а ваш JavaScript - Have_it.
3. Вопросы капитализации. Have_It - это не то же самое, что Have_it. Будьте осторожны с этим, когда вы пытаетесь получить элементы по идентификатору.
4. Класс с пробелами в нем на самом деле представляет собой несколько классов. have_it selected фактически имеет как класс have_it, так и класс selected. Поэтому нет необходимости удалять have_it, а затем добавить have_it selected - вы можете перейти прямо к добавлению класса selected.
5. Функция getElementbyTitle() в настоящее время не существует в JavaScript. Кроме того, будьте осторожны с капитализацией. Как правило, первая буква каждого слова в функции капитализируется. Таким образом, если бы это существовало, это было бы называться getElementByTitle() (обратите внимание на B вместо b).

Answer 2

Если вы не можете использовать JQuery, то вы можете изменить имя класса элемента с помощью className:

var element = document.getElementById("elementId"); 
element.className = "have_it selected"; 

Отметим также функцию: getElementsByClassName (HTML5).

Как уже указывалось, у вас есть другие проблемы, которые вы выбираете для своего элемента. Из вашего примера, это выглядит, как вы хотите использовать:

var element = document.getElementById("sjDDulC8wt"); 
var children = element.getElementsByClassName("have_it"); 
children[0].className = "have_it selected"; 

Обратите внимание, что есть нет обработки ошибок/нулевых чеков здесь. И это обрабатывает простой случай только изменения первого ребенка с указанным классом, предполагая, что он существует.

Но предпочитайте jQuery, если вы можете использовать это. Из вашего использования addClass/removeClass кажется, что вы уже ожидаете jQuery.

Answer 3

Это должно сделать задачу для вас:

<a title="Have It" class="have_it" onclick="this.className+=' selected'">%</a> 

Однако, вы должны узнать о DOM. Ни один из методов, которые вы использовали (getElementbyID, getElementsbyTitle, removeClass и addClass) существует.

Answer 4

Здесь:

var anchor = document.querySelector('#sjDDulC8wt [title="Have It"]'); 
if (anchor) anchor.classList.add('selected'); 

Живая демонстрация:http://jsfiddle.net/UZfnh/

(не будет работать в старых браузерах.)

Answer 5

Когда вы успешно найти элемент, вы можете сделать один из них :

1. element.classList.add("selected");

   Он использует довольно новую функцию classList, доступную для FF 3.6, IE 10, Chrome 8, Opera 11.50, Safari 5.1 и выше. Это самый предпочтительный способ сделать это, как только вы убедитесь, что у ваших клиентов будет один из этих браузеров (в ближайшем будущем).

2. element.className += " selected";

   className doc. Это работает и, вероятно, самый простой способ. Не так хорошо, как вещь classList, но доступна для всех браузеров.