Jquery Show Hide Div on Radio Select答案

【问题标题】：Jquery Show Hide Div on Radio SelectJquery Show Hide Div on Radio Select
【发布时间】：2015-11-05 18:25:38
【问题描述】：

我有以下单选按钮。在页面加载时，我想隐藏所有有序列表。当我选择值为 40 的收音机时，我想显示 list-group-1，当我选择值为 50 的收音机时，我想显示 list-group-2，当我选择值为 60 的收音机时，我想显示 list-group- 3.你怎么能用 jquery 做到这一点？

<input type="radio" name="age" value="40">40
<input type="radio" name="age" value="50">50
<input type="radio" name="age" value="60">60



<ol class="list-group-1">
 <li class="line"></li>
<ol>

<ol class="list-group-2">
 <li class="line"></li>
</ol>

<ol class="list-group-3">
 <li class="line"></li>
</ol>

** 编辑 **

欣赏所有不同的解决方案，但为什么 jquery toggle() 方法不起作用？

最后我用的是这个：

$(function() {
  $('*[class^="js-toggle-"]').hide();

  var myListRef = {'email':'email','tel':'tel','writing':'writing'}
  $('[name="contact"]').click(function() {
     var $this = $(this);
     $('.js-toggle-' + myListRef[$this.val()]).show();

     $.each( myListRef , function( key, value ) {
         if(value !== $this.val()) {
              $('.js-toggle-' + value).hide();
         }    
      });

  });

 $('#problem').change(function(){
    if($('#problem').val() == 'parcel') {
        $('.js-toggle-problem').show(); 
    } else {
        $('.js-toggle-problem').hide(); 
    } 
  });
});

【问题讨论】：

当您选择另一个单选按钮时列表是否仍然可见？

标签： javascript jquery html

【解决方案1】：

试试这个：

$("ol[class^='list-group-']").hide();
//$(".list-group-1").hide();
//$(".list-group-2").hide();
//$(".list-group-3").hide();

$("input[type=radio]").click(function() {
  switch(this.value){
    case '40':
      $(".list-group-1").show();
      $(".list-group-2").hide();
      $(".list-group-3").hide();
      break;
    case '50':
      $(".list-group-1").hide();
      $(".list-group-2").show();
      $(".list-group-3").hide();
      break;
    case '60':
      $(".list-group-1").hide();
      $(".list-group-2").hide();
      $(".list-group-3").show();
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="age" value="40">40
<input type="radio" name="age" value="50">50
<input type="radio" name="age" value="60">60



<ol class="list-group-1">
 <li class="line">test 1</li>
</ol>

<ol class="list-group-2">
 <li class="line">test 2</li>
</ol>

<ol class="list-group-3">
 <li class="line">test 3</li>
</ol>

注意：您在评论中询问了在一个 jQuery 中选择所有 <ol> 元素的正确语法。正确的语法是$("ol[class^='list-group-']").hide();。我在上面的演示中使用了它，并注释掉了三个等效的行。

【讨论】：

【解决方案2】：

$(function() {
   $('ol').hide();
    var myListRef = {'40':'1','50':'2','60':3}
   $('[name="age"]').click(function() {
         $('.list-group-' + myListRef[$(this).val()]).show();
   });
});

【讨论】：

有没有办法使用类隐藏有序列表。 $('ol *[class*='list-group-']).hide() 之类的东西似乎找不到正确的语法？
你可以得到它，但不能直接作为选择器，你需要将它作为循环运行。 $('ol').forEach(function(){ if($(this).attr('class').indexOf('list-group-') == 0) { //你的代码在这里 } } );
这会隐藏所有以 list-group 开头的类，不是$('ol *[class^='list-group-']).hide() 吗？
对不起，完整的语法是什么？
我不确定您的解决方案。我可以说在我上面的 cmets 中添加 $(this).hide() 代替“Your code here”注释行之后，我所做的方式将起作用。

【解决方案3】：

也许我的解决方案有点长一点，更容易理解发生了什么：http://jsfiddle.net/xrveLsc8/

CSS：

ol {
    display: none;
}

JS：

$(function() {
    $('input[name="age"]').click(function() {
        var lisGroup = null;

        switch (parseInt($(this).val())) {
            case 40:
                lisGroup = '.list-group-1';
                break;
            case 50:
                lisGroup = '.list-group-2';
                break;
            case 60:
                lisGroup = '.list-group-3';
                break;
        }

        $(lisGroup).show();
    });
});

【讨论】：

【解决方案4】：

由于input和ol元素在你的场景中的位置是相互对应的，最简单最简单的方法是使用index()作为input，并使用它来定位对应的ol。

$('ol').hide(); // Hide all ol's initially
$('input:radio').click(function()
{
    $('ol').hide(); // Hides all ol's - remove if not needed
    $('ol').eq($(this).index()).show(); - finds the corresponding index of ol and shows it.
});

http://jsfiddle.net/f1sdptm4/1/

有了这个，您可以添加尽可能多的输入单选按钮组合，而不必重新访问脚本部分。

【讨论】：