0

我正在尝试根据您选择的收音机隐藏和显示不同的 div。不幸的是，到目前为止我还没有提出可行的解决方案。这是我的起始代码http://jsbin.com/edokef/1/edit

也许有人可以建议如何实现这一目标？我正在考虑获取每个收音机的索引，但每个收音机都在单独的 div 包装内，在这种情况下，索引始终为 0。

谢谢你的任何想法。

4

5 回答 5

5

演示：http: //jsbin.com/edokef/7/edit

代码：

options.click(function(){
      var id = "opt" + $(this).val();
      $(".optDivs").hide();
      $("#" + id).show();

    });

另外，应该显示的每个 div 现在都有一个类 ( optDivs)

于 2012-11-22T11:23:08.910 回答
1

很抱歉没有为您提供完整的解决方案。

1）为什么要使用索引？每台收音机都有价值。改用那个。

2）“根据您选择的收音机隐藏和显示不同的div”对我来说听起来至少像一对多的关系。我建议为此任务使用发布者/订阅者。这种模式有很多可用的实现，例如。https://github.com/federico-lox/pubsub.js

PS 尽量避免基于 jQuery 的 pubsub 实现（它们在 DOM 上操作并且有点慢）

于 2012-11-22T11:25:34.307 回答
1

您可以使用toggle()基于单选按钮的 div 显示或隐藏

  var options = $('#options').find('input');

  options.click(function(){

   $("#"+$(this).parent().attr('class')).toggle();

  });

})();

演示

于 2012-11-22T11:25:52.710 回答
0

可能这可以帮助你

$(function(){

  (function(){

  var options = $('#options').find('input');

    options.click(function(){
         if($(this).is(':checked'))
         {

          $('#' + $(this).parent().attr('class')).show();
         }
                  else
                  {
                  $('#' + $(this).parent().attr('class')).hide();
                  }

    });

  })();

  });

演示

于 2012-11-22T11:25:55.403 回答
0

这将起作用：

  <script>
  $(function(){

  (function(){

  var options = $('#options').find('input');

    $(options).click(function(){

      $('#opt1, #opt2, #opt3').hide();
      $('#' + $(this).parent().attr('class')).show();

    });

  })();

  });
  </script>
于 2012-11-22T11:26:38.727 回答