Question

我有无限的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。请帮助。我在JS Fiddle上做了一个演示

并且除了我尝试过的之外，请建议一个更好的方法来实现这个目标

Answer 1

您已使用数字开头，这是无效的命名约定。您需要在号码前面加上一些文字。 class和id的值不能以数字开头。

此外，您在淡入淡出时出现语法错误！请参阅以下工作代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你忘了fadeIn后的括号：

$("#"+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>

和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的情况下浏览网页，或者在非常慢的互联网上改善加载时间（例如远离城市中心且只能通过卫星上网的人）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

here is the live demo

我提供的示例假设div紧跟在标记中的单选按钮之后，但是无论它在哪里，都可以使用某些兄弟/子选择器的变体来选择它，只要它是单选按钮的兄弟姐妹或孩子（直接或间接）。

如果你仍想要＆＃34;淡出＆＃34; jQuery为您提供的效果，您可以通过更改不透明度而不是显示类型来实现此功能，并应用过渡属性。 Here就是一个例子。

根据单选按钮单击显示div

6 个答案: