從多個廣播電臺獲取變量並使用jquery顯示內容

好的，我是整個jquery前端的新手，有些切割&粘貼然後是tweek，但我陷入困境，也許我沒有尋找正確的東西，但這裏去...從多個廣播電臺獲取變量並使用jquery顯示內容

我有一個2個無線電框組3（當前數字選擇和Alpha選擇）的形式。我試圖做的是讓用戶爲每個集合選擇一個選項，並將相關的結果返回給a。

因此，總共會有9種可能的組合，（一個AY，一個BEE，一個CEE，兩個Ay ....等等）。

我想我需要一些東西：

要了解所選
處理這個值
顯示對於價值
允許正確內容的兩個單選按鈕的值用戶改變他們的選擇，根據需要顯示和隱藏每一個（如果可能的話，儘快選擇兩個選項，但希望這會發生），但'提交'btton會好的）

以下是我有：

HTML表單

<p>Number Selection</p> 

<p> 
<input type="radio" name="r1" value="one"> one <br /> 
<input type="radio" name="r1" value="two"> two <br /> 
<input type="radio" name="r1" value="three"> three <br /> 
</p> 

<p>Alpha Selection</p> 

<p> 
<input type="radio" name="r2" value="AY"> AY <br /> 
<input type="radio" name="r2" value="BEE"> BEE <br /> 
<input type="radio" name="r2" value="CEE"> CEE <br /> 

</p> 

</form>

HTML DIV的

<div class="oneAY" style="display:none;">one AY</div> 
<div class="oneBEE" style="display:none;">one BEE</div> 
<div class="oneCEE" style="display:none;">one CEE</div> 

<div class="twoAY" style="display:none;">two AY</div> 
<div class="twoBEE" style="display:none;">two BEE</div> 
<div class="twoCEE" style="display:none;">two CEE</div> 

<div class="threeAY" style="display:none;">three AY</div> 
<div class="threeBEE" style="display:none;">three BEE</div> 
<div class="threeCEE" style="display:none;">three CEE</div>

SCRIPT（只是定義每一個結果，可能是沒譜的方式）

<script type=」"text/javascript> 


      { 
       case "0": 
        document.getElementById("oneAY").style.display="block"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "1": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="block"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "2": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="block"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "3": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="block"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "4": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="block"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "5": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="block"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "6": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="block"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "7": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="block"; 
        document.getElementById("threeCEE").style.display="none"; 
       break; 
       case "8": 
        document.getElementById("oneAY").style.display="none"; 
        document.getElementById("oneBEE").style.display="none"; 
        document.getElementById("oneCEE").style.display="none"; 
        document.getElementById("twoAY").style.display="none"; 
        document.getElementById("twoBEE").style.display="none"; 
        document.getElementById("twoCEE").style.display="none"; 
        document.getElementById("threeAY").style.display="none"; 
        document.getElementById("threeBEE").style.display="none"; 
        document.getElementById("threeCEE").style.display="block"; 
       break; 


</script>

來源

2011-06-28 Kieran

當然是有改進的餘地;），但「腳本」無效JavaScript無論如何... –

我知道它很短，很多東西，我認爲我可以處理div的顯示和隱藏。如果我誠實，我真的不知所措。 – Kieran

好吧，首先我會給所有的div是一個普遍的課，讓我們說content：

<div class="oneAY content" style="display:none;">one AY</div> 
... 

<div class="twoAY content" style="display:none;">two AY</div> 
...

然後隱藏和顯示他們是相當簡單的。你必須將事件處理程序註冊到change事件單選按鈕，獲得選擇按鈕的值，並顯示相應的div：

$('input[name="r1"], input[name="r2"]').change(function() { 
    var r1val = $('input[name="r1"]:checked').val(), 
     r2val = $('input[name="r1"]:checked').val(); 

    if(r1val && r2val) { 
     $('.content').hide(); 
     $('.' + r1val + r2val).show(); 
    } 
});

（注：這是不是最好的代碼，要麼，但它僅用於演示如何可以完成的。理想情況下，你會緩存引用元素。）

DEMO

我建議閱讀

...的MDC JavaScript Guide瞭解JavaScript的
...約DOM（參考）
...的articles on quirksmode.org有關的各類事件處理
的...你讀一些jQuery tutorials瞭解jQuery的

來源

2011-06-28 11:13:53

讚賞。我會深入研究教程，不能推遲滿足的壞習慣。 – Kieran

好的答案@Felix。礦幾乎是相同的，但你的演示，評論和建議更好。 –

在這裏你去：

var $radioList = $('input[type="radio"]'); 
$('input[type="radio"]').change(function() { 
    var $r1 = $radioList.filter('[name="r1"]:checked'); 
    var $r2 = $radioList.filter('[name="r2"]:checked'); 
    if($r1.length > 0 && $r2.length > 0) { 
     $('div').hide(); 
     $('.' + $r1.val() + $r2.val()).show(); 
    } 
});

而且here是的jsfiddle測試用例

來源

2011-06-28 11:20:05

從多個廣播電臺獲取變量並使用jquery顯示內容

回答

相關問題