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

Question

我有一組3個單選按鈕，這些元素ID：

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

我如何獲得所有的ID與'details_'開始元素？

編輯

什麼實際上，我想這樣做是： 每個單選按鈕，我想點擊的單選按鈕時顯示相關的股利。有一次只有一個單選按鈕處於活動狀態，因此只能顯示該單選按鈕的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屬性 - 但如何？

Answer 1

您應該在管理所有點擊的表單上創建一個事件處理程序。你應該做一個選擇，因爲你只關心<input>字段name == details。

然後，您可以隱藏<form>中的所有div，並以指定的ID開始，只顯示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; 
}