適應腳本使用收音機而不是選擇

Question

我在這裏有一個小腳本，顯示/隱藏某些DIV，具體取決於在下拉列表中選擇哪個選項。

document.getElementById('inquiry').onchange = function() { 
    var i = 1; 
    var myDiv = document.getElementById("inquiry" + i); 
    while(myDiv) { 
     myDiv.style.display = 'none'; 
     myDiv = document.getElementById(("inquiry" + ++i)); 
    } 
    document.getElementById(this.value).style.display = 'block'; 
} 

此腳本基本上只檢查其值在下拉選擇（即值=「inquiry1」），然後用一個等於下拉的所選擇的值的ID改變DIV的CSS（即ID = 「inquiry1」）。

但現在上級要將下拉列表更改爲一組單選按鈕，並具有相同的功能（如果選擇了值爲「inquiry1」的單選按鈕，則id =「inquiry1」的div也應該更改。

我怎麼會去適應上面的腳本，以適應單選按鈕？

重要的是，劇本是足夠的靈活性，允許在將來增加更多的選擇（因此「+ i」的東西）

Answer 1

下面是一個使用jQuery處理事件的解決方案（因爲你用標記了你的問題）。我已經包含了很多評論，以及足夠的HTML和CSS，以便您可以看到發生了什麼。

重要的是要注意它不會連接許多不同的事件處理程序，每個處理程序都綁定到不同的單選按鈕和部分，而只是設置一個支持所有這些處理程序的「全局」處理程序，使用單選按鈕的value屬性與要顯示或隱藏的文檔部分的id屬性綁定。

// Wire up an event handler so that any click on any radio button inside "ul.options" is monitored. 
 
$("ul.options input:radio").on("click", function() { 
 

 
    // Get the "value" attribute from the radio button that was clicked. 
 
    var chosenOption = $(this).val(); 
 
    
 
    // Hide all of the sections. 
 
    $(".sections > div").hide(); 
 
    
 
    // Now show just the appropriate section for the button that was clicked. 
 
    $("#" + chosenOption).show(); 
 
}); 
 

 
// Now simulate a click on the first radio button, so *something* is shown on page load. 
 
$("ul.options input:radio:first").click();

ul.options { 
 
    display: block: 
 
    margin: 1em 0; 
 
    padding: 0; 
 
} 
 

 
ul.options li { 
 
    display: inline-block; 
 
    margin: 0 1em; 
 
    padding: 0; 
 
} 
 

 
.sections { 
 
    display: block; 
 
    border: 1px solid #CCC; 
 
    padding: 1em; 
 
} 
 

 
.sections > div { 
 
    display: none; /* Don't show any section by default */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<!-- These are the radio buttons you can click on. They're wrapped in label elements 
 
    so that you can click either the radio button or the text. --> 
 
<ul class="options"> 
 
    <li><label><input type="radio" value="option1" name="inquiry" /> Option 1</label></li> 
 
    <li><label><input type="radio" value="option2" name="inquiry" /> Option 2</label></li> 
 
    <li><label><input type="radio" value="option3" name="inquiry" /> Option 3</label></li> 
 
    <li><label><input type="radio" value="option4" name="inquiry" /> Option 4</label></li> 
 
    <li><label><input type="radio" value="option5" name="inquiry" /> Option 5</label></li> 
 
</ul> 
 

 
<!-- These are the sections that can be shown. Their ids must match the values 
 
    for the radio buttons. --> 
 
<div class="sections"> 
 
    <div id="option1">Here's some content for option 1</div> 
 
    <div id="option2">Here's some other content for option 2</div> 
 
    <div id="option3">Here's some different content for option 3</div> 
 
    <div id="option4">Here's yet more content for option 4</div> 
 
    <div id="option5">Here's altogether different content for option 5</div> 
 
</div>