代码之家 › 专栏 › 技术社区 › Zabba fl00r

如何获取包含特定文本的ID元素?(原型)

css-selectors prototypejs javascript

3

Zabba fl00r · 技术社区 · 15 年前

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

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

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

编辑

每个单选按钮都有一个关联的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

1 回复 | 直到 14 年前

1

2

gblazex 15 年前

您应该在表单上创建一个事件处理程序来管理所有的单击。你应该做一个选择,因为你只关心 <input> name == details .

然后你可以把所有的div都藏在 <form> 从指定的id开始,只显示具有 clicked element's id + _div 结束。

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

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