顯示div的基礎上用單選按鈕選擇的號碼

我有4個div需要顯示與所選單選按鈕旁邊的數字相稱。所以如果我點擊1，那麼只有div＃1顯示。如果我選擇3，則div的1到3顯示。我在這個網站上看到了顯示或隱藏div或元素的解決方案。我還沒有找到任何可以讓你從一個「ID」中選擇一個數字，然後顯示這個數字的div。顯示div的基礎上用單選按鈕選擇的號碼

我的HTML很簡單：

<input type="radio" name="sNum" value="1"><span>1</span> 
<input type="radio" name="sNum" value="2"><span>2</span> 
<input type="radio" name="sNum" value="3"><span>3</span> 
<input type="radio" name="sNum" value="4"><span>4</span> 
<br /> 
<div id="g1" class="gSet"> 
    content here 
</div> 
<div id="g2" class="gSet"> 
    content here 
</div> 
<div id="g3" class="gSet"> 
    content here 
</div> 
<div id="g4" class="gSet"> 
    content here 
</div>

我只是不知道如何去這樣做，並歡迎對我有什麼建議做基於我所知道的一個雜牌。我知道我需要輸入選擇的值，並與相應的ID的

來源

2013-05-08 Amidude

試試這個匹配起來 -

$('input').on('change',function(){ 
    var val = $(this).val(); 
    $('div.gSet').hide(); 
    $("div.gSet:lt("+val+")").show(); 
});

工作演示 - >http://jsfiddle.net/mohammadAdil/uS7SA/1/

來源

2013-05-08 21:00:06

爲什麼選擇'.gSet'元素兩次？ - '$（「。gSet」）。hide（）。filter（「：lt（」+ this.value +「）」）。show（）;' – Andreas 2013-05-08 21:06:47

@Andreas - 您的解決方案運行良好。我只需要確保最初隱藏所有的div。 – Amidude 2013-05-08 21:19:39

@Andreas - 我想通了。我忘了放置顯示：沒有在我的CSS。我現在很好。感謝您的幫助。我學到了很多。看起來會有更多的閱讀需要完成。 – Amidude 2013-05-08 21:24:57

$('input:radio').on('change',function(){ 
    $('#g'+$(this).val()).show().siblings('div').hide(); 
});

Fiddle For you..

來源

2013-05-08 21:13:40 writeToBhuwan

顯示div的基礎上用單選按鈕選擇的號碼

回答

相關問題