Как получить элементы с идентификатором, содержащим определенный текст? (Прототип) - PullRequest
Новая
       11

Как получить элементы с идентификатором, содержащим определенный текст? (Прототип)

3 голосов
/ 19 октября 2010

У меня есть набор из 3 переключателей, с такими идентификаторами элементов: 

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

Как получить все элементы, чей идентификатор начинается с 'details_'?

EDIT

То, что я на самом деле пытаюсь сделать, это: Каждый переключатель имеет соответствующий 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 Ответ

2 голосов
/ 19 октября 2010

Вы должны создать обработчик событий в форме, который управляет всеми кликами. Вы должны сделать выбор, потому что вам нужны только поля <input> с name == details.

Затем вы можете скрыть все div в вашем <form>, начиная с указанного идентификатора, и показать только тот, у которого clicked element's id + _div заканчивается.

Наконец, вы можете удалить обработчики событий из вашей разметки.

См. рабочая демонстрация . 

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