基于两个单选按钮显示和隐藏 div

Question

见https://jsfiddle.net/JD26/9gcwf46z/2/

我有两个广播组和四个 div。根据选择的单选按钮，我总是想只显示一个 div 并隐藏其他的。我尝试了不同的方法，但无法正常工作。

HTML：

<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>

jQuery:

$(".red").hide();
$(".bear").hide();

$("input[name='color']").on("change", function() {
        if ($("#blue").is(':checked')) {
            $(".blue").show();
            $(".red").hide();
        }

        else if ($("#red").is(':checked')) {
            $(".red").show();
            $(".blue").hide();
        }
    });


    $("input[name='animal']").on("change", function() {
        if ($("#fox").is(':checked')) {
            $(".fox").show();
            $(".bear").hide();
        }

        else if ($("#bear").is(':checked')) {
            $(".bear").show();
            $(".fox").hide();
        }
    });

这没有用，这也没有：

  $('input').change(function() {
    if ($('input[value="blue"]').is(':checked') && $('input[value="fox"]').is(':checked')) {
      $('.blue').show();
      $('.fox').show();
      $('.red').hide();
      $('.bear').hide();
    }
    else if ($('input[value="blue"]').is(':checked') && $('input[value="bear"]').is(':checked')) {
      $('.blue').show();
      $('.fox').hide();
      $('.red').hide();
      $('.bear').show();
    }
    else if ($('input[value="red"]').is(':checked') && $('input[value="fox"]').is(':checked')) {
      $('.blue').hide();
      $('.fox').show();
      $('.red').show();
      $('.bear').hide();
    }
    else if ($('input[value="red"]').is(':checked') && $('input[value="bear"]').is(':checked')) {
      $('.blue').hide();
      $('.fox').hide();
      $('.red').show();
      $('.bear').show();
    }

  });

非常感谢您的帮助！

Answer 1

您不需要那些 if 语句，您可以使用这些值并根据值显示、隐藏。

$(document).ready(function () {
$(".fox").hide();
$(".bear").hide();
$("." + $("input[name='color']:checked").val() + "." + $("input[name='animal']:checked").val()).show();
});


$("input[type='radio']").on("change", function() {   
    $(".bear").hide();
    $(".fox").hide();
    $("." + $("input[name='color']:checked").val() + "." + $("input[name='animal']:checked").val()).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>

Answer 2

$(".red").hide();
$(".bear").hide();
 
$('input').change(function(elem) { 
  let animalClass = "."+$("input[name='animal']:checked").val();
  let colorClass = "."+$("input[name='color']:checked").val();
  $(".blue, .red, .fox, .bear").hide();
  $(colorClass+animalClass).show();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>

<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="blue" value="blue" checked>
   <label class="form-check-label" for="blue">blue</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="color" id="red" value="red">
   <label class="form-check-label" for="red">red</label>
</div>
<hr>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="fox" value="fox" checked>
   <label class="form-check-label" for="fox">fox</label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="animal" id="bear" value="bear">
   <label class="form-check-label" for="bear">bear</label>
</div>

<br><br>

<div class="blue fox">blue fox</div>

<div class="blue bear">blue bear</div>

<div class="red fox">red fox</div>

<div class="red bear">red bear</div>

Answer 3

我们在这里过度思考和复杂化。您所需要的只是检查并使用它来决定显示哪个 div。 下面是代码的样子：

function doMagic() {
  var color = $('input[name="color"]:checked').val();
  var animal = $('input[name="animal"]:checked').val();

  $(".red").hide();
  $(".blue").hide();

  $("." + color + "." + animal).show();
}

doMagic();
$('input').change(function() {
  doMagic();
});

And here is the working fiddle