根據單選按鈕點擊顯示div

Question

我有無限的div，裏面有一個單選按鈕，還有一個與div關聯的div，div將被隱藏。只有當該單選按鈕是選擇，如果選擇了另一個單選按鈕，它將隱藏顯示的當前div並顯示與該特定單選按鈕關聯的div。

<div> 
<input type="radio" name="infinte" value="1" /> 
</div> 
<div id="1" style="display:none">im div of 1</div> 

<div> 
<input type="radio" name="infinte" value="2" /> 
</div> 
<div id="2" style="display:none">im div of 2</div> 

<div> 
<input type="radio" name="infinte" value="3"/> 
</div> 
<div id="3" style="display:none">Im div of 3</div> 
. 
. 
. 

和我的jQuery是

$('input[type="radio"]').click(function(){ 
    if ($(this).is(':checked')) 
    { 
     var value = $(this).val(); 
     $('#'+value).fadeIn(); 
    } 
    else 
    { 
     var value = $(this).val(); 
     $('#'+value).fadeOut(); 
    } 
    }); 

但在這裏，當我選擇另一個單選按鈕，它不是隱藏當前的div是shown.Please help.I做了演示上JS Fiddle

並請建議一個更好的方法來實現這一點，而不是我已經嘗試過的

Answer 1

您已經給出了以數字開頭的ID，這是無效的命名約定。你需要在號碼前加上一些文字。 class和id的值不能以數字開頭。

此外，您在淡入淡出時有語法錯誤！請參見下面的工作代碼：

$('input[type="radio"]').click(function(){ 
 
    if ($(this).is(':checked')) 
 
    { 
 
     var value = $(this).val(); 
 
     $("#"+value).fadeIn(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="radio" name="infinte" value="a1" /> 
 
</div> 
 
<div id="a1" style="display:none">im div of 1</div> 
 

 
<div> 
 
    <input type="radio" name="infinte" value="a2" /> 
 
</div> 
 
<div id="a2" style="display:none">im div of 2</div> 
 

 
<div> 
 
    <input type="radio" name="infinte" value="a3"/> 
 
</div> 
 
<div id="a3" style="display:none">Im div of 3</div>

Answer 2

你忘了括號淡入後：

$("#"+value).fadeIn(); 

http://jsfiddle.net/gw8ty4py/1/

編輯：剛剛意識到你還需要其他的div隱藏。試試這個：

<div> 
<input type="radio" name="infinte" value="1" /> 
</div> 
<div class="toggleDiv" id="1" style="display:none">im div of 1</div> 

<div> 
<input type="radio" name="infinte" value="2" /> 
</div> 
<div class="toggleDiv" id="2" style="display:none">im div of 2</div> 

<div> 
<input type="radio" name="infinte" value="3"/> 
</div> 
<div class="toggleDiv" id="3" style="display:none">Im div of 3</div> 

---

var toggleDivs = $(".toggleDiv"); 
$('input[type="radio"]').change(function(){ 
    toggleDivs.fadeOut(); 
    if ($(this).is(':checked')) 
    { 
     var value = $(this).val(); 

     $("#"+value).fadeIn(); 
    } 
    }); 

工作小提琴：http://jsfiddle.net/gw8ty4py/8/

Answer 3

試試這個：JSFiddle

Changue

$('#'+value).fadeIn(); 

爲

$("#"+value).show("fadeIn"); 

Answer 4

試試這個，

var current=null; 
    $('input[type="radio"]').click(function(){ 
if ($(this).is(':checked')) 
{ 
    if(current!=null) 
    $("#"+current).hide();   
    var value = $(this).val(); 
    current=value; 
    $("#"+value).fadeIn(); 
} 
}); 

EXAMPLE FIDDLE

Answer 5

你可以試試這個：

<input type="radio" name="infinte" value="1" /> 

<div id="1" style="display:none">im div of 1</div> 


<input type="radio" name="infinte" value="2" /> 

<div id="2" style="display:none">im div of 2</div> 


<input type="radio" name="infinte" value="3"/> 

<div id="3" style="display:none">Im div of 3</div> 

ADN JS：

$('input[type="radio"]').click(function(){ 
if ($(this).is(':checked')) 
{ 
    var value = $(this).val(); 
    $('#'+value).fadeIn(); 
    $('div').not('#'+value).fadeOut(); 
} 

}); 

DEMO FIDDLE

Answer 6

有一個零JavaScript版本，它簡單易用，適用於all major browsers。它利用了:checked僞類和adjacency selector。它適用於任意數量的單選按鈕/ div。它完全適用於您的情況，因爲您在每個單選按鈕後列出了每個div。

與已發佈的其他解決方案相比，它的優勢在於，即使用戶禁用Javascript（在這種情況下，其他解決方案將不會顯示內容，使該功能無法使用），它仍然可以工作。一些用戶在禁用Javascript的情況下瀏覽網頁，出於安全原因或爲了延長非常慢的互聯網上的加載時間（如遠離城市中心且只能通過衛星上網的人）。

div { 
 
    display: none; 
 
} 
 

 
input[type="radio"] { 
 
    display: block; 
 
} 
 

 
input[type="radio"]:checked + div { 
 
    display: block; 
 
}

<input type="radio" name="infinte" value="1" /> 
 
<div>im div of 1</div> 
 

 
<input type="radio" name="infinte" value="2" /> 
 
<div>im div of 2</div> 
 

 
<input type="radio" name="infinte" value="3"/> 
 
<div>Im div of 3</div>

here is the live demo

我提供的示例假定DIV緊跟在標記的單選按鈕，但兄弟/子選擇的某些變種可以用來選擇無論它在哪裏，只要它是單選按鈕的兄弟或小孩（直接或間接）。

如果你仍然想要jQuery爲你提供的「淡入淡出」效果，你可以通過改變不透明度而不是顯示類型來實現它，並應用轉換屬性。 Here就是一個例子。