Question

我有一个div的'onclick'事件处理程序，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";
  }

这是'itemListReadonlyTextFieldSelected'CSS类：

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

我的页面上有几个'div-with-nested-readonly-text-field'。

当用户点击其中一个时，上面的onclick处理程序成功地将嵌套文本输入的字体更改为粗体和红色。所以选择部分 - 粗体+红色文本 - 工作正常。但是当用户点击其他地方时，我需要取消选择旧的选择。

所以我的问题是 - 我如何跟踪'当前选择的div +文本输入'项目 - 这样当点击不同的div +文本输入时，我可以更改以前选择的div +文本使用这种风格输入黑色非粗体文字？

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

我立即认为“我只会在我的会话中保存'当前选中的'div和文本输入DOM元素 - 啊，这是客户端javascript。”在服务器端代码中，会话变量是我的首选。

我目前的技术要求是php，javascript和html（jquery = no。）

跟踪之前选择的div +文本输入有什么好方法？

一个强力方法是遍历页面上的ELEMENT树，找到一个div，它有一个嵌套的文本元素，其className =“itemListReadonlyTextFieldSelected”，但我宁愿用gott-dang粉碎我的大脚趾大锤在代码审查期间没有人在看到类似的东西之后给我打了个招呼。

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;
}

需要跟踪用CSS突出显示的“选定”div

1 个答案: