Question

请参见Python pandas: remove everything after a delimiter in a string

我有两个广播组和四个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

$(".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 2

您不需要那些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 3

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

Alarm Details:
- Name:                       rsh-rpt-se1-dat-rdb-lbx-rubicon-HealthStatus
- Description:               
- State Change:               OK -> ALARM
- Reason for State Change:    Threshold Crossed: 5 out of the last 30 datapoints were less than the threshold (1.0). The most recent datapoints which crossed the threshold: [0.0 (06/11/19 20:15:00), 0.0 (06/11/19 20:14:00), 0.0 (06/11/19 20:13:00), 0.0 (06/11/19 20:12:00), 0.0 (06/11/19 20:11:00)] (minimum 30 datapoints for OK -> ALARM transition).
- Timestamp:                  Wednesday 06 November, 2019 20:46:23 UTC
- AWS Account:                myaccount

And here is the working fiddle

根据两个单选按钮显示和隐藏div

3 个答案: