Question

我试图隐藏并显示不同的div，具体取决于您选择的无线电。不幸的是，到目前为止我无法提出工作解决方案。这是我的起始代码http://jsbin.com/edokef/1/edit

也许有人可以建议如何实现这一目标？我正在考虑获取每个无线电的索引，但每个无线电都在单独的div换行中，在这种情况下，索引始终为0.

谢谢你的任何想法。

Answer 1

代码：

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

    });

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

Answer 2

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

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

2）“隐藏和显示不同的div取决于你选择的无线电”对我来说至少听起来像一对多的关系。我建议使用发布者/订阅者来完成此任务。这种模式有许多可用的实现，例如。 https://github.com/federico-lox/pubsub.js

PS尽量避免基于jQuery的pubsub实现（他们操纵DOM并且有点慢）

Answer 3

您可以使用toggle()根据单选按钮显示或隐藏div

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

  options.click(function(){

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

  });

})();

DEMO

Answer 4

可能这可以帮到你

$(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();
                  }

    });

  })();

  });

DEMO

Answer 5

这将有效：

  <script>
  $(function(){

  (function(){

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

    $(options).click(function(){

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

    });

  })();

  });
  </script>

在电台选择上显示各种内容

5 个答案: