необходимо отслеживать «выбранные» div, которые выделены с помощью CSS

Question

У меня есть обработчик события onclick для div, и div имеет вложенное текстовое поле только для чтения, текстовый шрифт которого изменяется с обычного на полужирный при выборе внутри обработчика onclick:

 <div class="itemlistRowContainer" id="topmostDiv_ID" onclick="handleRowClick(this);">
    <input type="text" size="30" maxlength="50" id="itemName_id"
           name="itemName" value="$itemname" readonly="readonly"
           class="itemListReadonlyTextFieldUnselected"></input>
 </div>

Вот обработчик onclick:

  function handleRowClick(theElement)
  {
      var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
      var theTextField = childTextElementArrayOfSizeOne[0];

      theTextField.className = "itemListReadonlyTextFieldSelected";
  }

Вот класс CSS 'itemListReadonlyTextFieldSelected':

   .itemListReadonlyTextFieldSelected
   {
        font-weight: bold;
        color: RGB(255,0,0);
   }

У меня есть несколько из этих 'div-with-nested-readonly-text-field 'на моей странице.

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

Поэтому мой вопрос - как я могу отслеживать элемент «выбранный в данный момент div + text input», чтобы прищелчок на другом вводе div + текста, я могу изменить ранее выбранный ввод div + текста на черный, не жирный текст, используя этот стиль?

   .itemListReadonlyTextFieldUnelected
   {
        font-weight: normal;
        color: RGB(0,0,0);
   }

I немедленно думал«Я просто сохраню« выбранные »элементы DOM и ввода текста в моей СЕССИИ - ага, нет, это JavaScript на стороне клиента».Переменные сеанса - это мой подход к таким вещам, как эта, в коде на стороне сервера.

Моими текущими технологическими требованиями являются php, javascript и html (jquery = no.)

Какой хороший способотслеживать ранее выбранный div + текстовый ввод?

Метод грубой силы заключается в том, чтобы обойти дерево элементов на странице и найти один элемент div с вложенным текстовым элементом, у которого className = "itemListReadonlyTextFieldSelected", но я бы предпочел разбить мой большой палец ногикувалдой, чем кто-то во время проверки кода, ударил меня по голове, увидев нечто подобное.

Answer 1

Как насчет присвоения его переменной?

var currentlySelectedTextElement;

function handleRowClick(theElement)
{
    // un-highlight the currently highlighted element
    if (currentlySelectedTextElement){
        currentlySelectedTextElement.className = "";
    }

    var childTextElementArrayOfSizeOne = theElement.getElementsByTagName("input");
    var theTextField = childTextElementArrayOfSizeOne[0];

    theTextField.className = "itemListReadonlyTextFieldSelected";

    // save the reference so you can un-highlight it later
    currentlySelectedTextElement = theTextField;
}