主页 / 问题 / 1420774
Accepted
Егор
Asked:2022-08-16 16:13:55 +0000 UTC2022-08-16 16:13:55 +0000 UTC

带有标记 Radio 的几个块的输出

  • 772

选择一个收音机时如何显示多个块？例如，输入本身位于页面中间的某个位置，当您选择其中一个时，内容应该出现在页面顶部和底部，同时出现在两个位置。我试图这样做，但由于某种原因，它只显示第一个块，但我想要，例如，块 1 和 4 或 2 和 3：

<div class="block-text" id="block-1">
    Блок текста №1
</div>

<div class="block-text" id="block-2">
    Блок текста №2
</div>

<p class="text-center">
    <label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
    <label><input type="radio" name="radio" value="2"> Radio Button 2</label>
</p>


<div class="block-text2" id="block-2">
    Блок текста №3
</div>

<div class="block-text2" id="block-1">
    Блок текста №4
</div>
  


<style>
  .block-text {
    display: none;
    padding: 15px;
    border: 3px solid #ec4848;
}

.block-text2 {
    display: none;
    padding: 15px;
    border: 3px solid #ec4848;
}
</style>
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('input[name="radio"]').click(function(){
      var target = $('#block-' + $(this).val());

      $('.block-text').not(target).hide(0);
      target.fadeIn(500);

  });
  
  $('input[name="radio"]').click(function(){
    var target = $('#block-' + $(this).val());

    $('.block-text2').not(target).hide(0);
    target.fadeIn(500);
   
});
</script>

还是我走错了路？然后呢？

javascript radiobutton

1 个回答

  1. Best Answer

    如果您为所有块设置一个类并为输入指定一些属性（在我的例子中是data-for），那么您可以编写一个非常简单的代码：

    $('input[name="radio"]').click(function() {
  $('.block-text').hide();

  $(this).data('for').split(' ').forEach(blockId => {
    $(`#${blockId}`).fadeIn(500);
  });
});
    .block-text {
  display: none;
  padding: 15px;
  border: 3px solid #ec4848;
}

.block-text2 {
  display: none;
  padding: 15px;
  border: 3px solid #ec4848;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="block-text" id="block-1">
  Блок текста №1
</div>

<div class="block-text" id="block-2">
  Блок текста №2
</div>

<p class="text-center">
  <label><input type="radio" name="radio" value="1" data-for="block-1 block-4"> Radio Button 1</label><br>
  <label><input type="radio" name="radio" value="2" data-for="block-2 block-3"> Radio Button 2</label>
</p>


<div class="block-text" id="block-3">
  Блок текста №3
</div>

<div class="block-text" id="block-4">
  Блок текста №4
</div>

    • 2

相关问题