如何获取 ID 包含特定文本的元素？（原型）答案

【问题标题】：How to get elements with an ID containing certain text? (Prototype)如何获取 ID 包含特定文本的元素？（原型）
【发布时间】：2011-12-29 22:31:42
【问题描述】：

我有一组 3 个单选按钮，具有以下元素 ID：

id='details_first'
id='details_second'
id='details_third'

如何获取id以'details_'开头的所有元素？

编辑

我真正想做的是：每个单选按钮都有一个关联的 div，我希望在单击单选按钮时显示该 div。一次只有一个单选按钮处于活动状态，因此只应显示该单选按钮的 div（应隐藏所有其他按钮）。所以我拥有的代码是：（抱歉，有点宽）：

<input id="details_first" name="details" type="radio" value="first"  onclick="$('details_*').hide();$('details_first_div').show();" />First<br/>
<div id="details_first_div" style="display:none">div for details_first</div>

<input id="details_second" name="details" type="radio" value="second"  onclick="$('details_*').hide();$('details_second_div').show();" />Second<br/>
<div id="details_second_div" style="display:none">div for details_second</div>

或者有没有更好的最佳实践方法来做这种事情？（我正在使用 Ruby on Rails）。也许通过name 属性选择 - 但如何？

【问题讨论】：

可以在这三个单选按钮上放置相同的类吗？
他们都有同一个父母吗？
这种元素只有三个吗？
这是可能的，我知道我可以使用 $$('detaisl_class') 按班级进行选择，但我不想这样做，因为它感觉很 hack-ish。
它们是否有其他类似的属性可供您选择？（即名称）

标签： javascript prototypejs css-selectors

【解决方案1】：

您应该在管理所有点击的表单上创建一个事件处理程序。您应该进行选择，因为您只关心带有name == details 的<input> 字段。

然后你可以隐藏<form>中所有以指定id开头的div，只显示以clicked element's id+_div结尾的div。

最后，您可以从标记中删除事件处理程序。

查看working demo。

var form = $("FORM_ID");
form.observe( 'click', function(event)  {
  var el = event.element();
  if ( el.name == "details" ) {
    // select: #FORM_ID div#details_*
    idStartsWith("details_", "div", form).invoke("hide");
    $(el.id + "_div").show();
  }
});

/**
* Selecting elements by how their id starts
*
* @param text - starting of the id
* @param tag  - filter results by tag name [optional]
* @param root - root of the selection      [optional]
*/
function idStartsWith(text, tag, root) {
  root = root || document;
  tag  = tag || "*";
  var arr = root.getElementsByTagName(tag);
  var len = arr.length;
  var ret = [];
  for ( var i = 0; i < len; i++ ) {
    if ( arr[i].id.indexOf( text ) === 0 )
      ret.push(arr[i]);
  }
  return ret;
}

【讨论】：