显示/隐藏div是否包含/不包含单选按钮值文本

Question

我在新项目中的任务很奇怪。我有2个单选按钮，并且必须根据单选按钮的选择显示某些下拉div。因此，单选按钮是2，而div是几个，但我希望它仅显示某些div，具体取决于单选按钮的选择。我无法为div分配额外的类和ID，因此我想尝试制作一个JavaScript来检查radio的值，然后查看它是否包含在div中，并仅显示包含radio值的div。这是示例： 编辑：添加了JS

$(document).ready(function(){
  $('input[type="radio"]').click(function(){
      var inputValue = $(this).attr("value");
      var text = div.innerHTML;
      $("Radio1").not(text).hide();
      $(text).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="container">Radio1
  <input type="radio" checked="checked" name="radio" value="Radio1">
  <span class="checkmark"></span>
</label>
<label class="container adult">Radio2
  <input type="radio" name="radio" value="Radio2">
  <span class="checkmark"></span>
</label>

<div class="select-items select-hide">
<div>1. Radio1 0</div>
<div>1.1. Radio1 - 1</div>
<div>1.2. Radio1 - 2</div>
<div>1.3. Radio1 - 3</div>
<div>1.4. Radio1 - 4</div>
<div>1.5. Radio1 - 5</div>
<div>1.5.1. Radio1 - 6</div>
<div>1.5.2. Radio1 - 7</div>
<div>1.5.3. Radio1 - 8 Loss</div>
<div>1.5.4. Radio1 - 9</div>
<div>1.6. Radio1 - 10</div>
<div>1.7. Radio1 - 11</div>
<div>2. Radio2 0</div>
<div>2.1. Radio2 - 1</div>
<div>2.2. Radio2 - 2</div>
<div>2.3. Radio2 - 3</div>
<div>2.4. Radio2 - 4</div>
</div>

EDIT2： 我忘了它还会影响另一个带有select-selected类的div，以显示Radio2 div的第一个。现在有点棘手。

<div class="select-selected">1. Radio1 0</div>

这是在div上带有select-hide类的

我没有成功。有什么想法怎么做或从哪里重新开始吗？

致谢！

Answer 1

您可以为input[radio]都添加一个更改侦听器，然后在侦听器功能内，选择所有div，将它们隐藏，然后循环遍历每个div以检查其内容（如果包含radio.value）然后在其textContent中显示它。

如果有帮助，请参见下面的代码

$("input[name='radio']").on("change", (ev) => {
  let elem = ev.target;
  if (elem.checked){
    let divs = $(".select-hide div")
    let val = elem.value;
    divs.hide() 
    divs.removeClass("select-selected")
    divs.each((i, div) => {
      let text = div.textContent
      if (text.indexOf(val) > -1){
        div.style.display = "block"
        if (text.indexOf(val + " 0") > -1){
          div.className += " select-selected";
        }
      }
    })
  }
})

//below code is to call the change when doc starts, to let radio1 selected
$("input[value='Radio1']").trigger("change")

.select-hide div{
  display: none;
}

.select-selected{
  color: green;
  font-size: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="container">Radio1
  <input type="radio" checked="checked" name="radio" value="Radio1">
  <span class="checkmark"></span>
</label>
<label class="container adult">Radio2
  <input type="radio" name="radio" value="Radio2">
  <span class="checkmark"></span>
</label>

<div class="select-items select-hide">
  <div>1. Radio1 0</div>
  <div>1.1. Radio1 - 1</div>
  <div>1.2. Radio1 - 2</div>
  <div>1.3. Radio1 - 3</div>
  <div>1.4. Radio1 - 4</div>
  <div>1.5. Radio1 - 5</div>
  <div>1.5.1. Radio1 - 6</div>
  <div>1.5.2. Radio1 - 7</div>
  <div>1.5.3. Radio1 - 8 Loss</div>
  <div>1.5.4. Radio1 - 9</div>
  <div>1.6. Radio1 - 10</div>
  <div>1.7. Radio1 - 11</div>
  <div>2. Radio2 0</div>
  <div>2.1. Radio2 - 1</div>
  <div>2.2. Radio2 - 2</div>
  <div>2.3. Radio2 - 3</div>
  <div>2.4. Radio2 - 4</div>
</div>

Answer 2

您可以像这样...使用jquery

$(document).ready(function(){
  function xyz(){
    var getval = $('label.container input[type="radio"]:checked').val();
    $('.select-items>div').each(function(){
      if($(this).text().indexOf(getval) > -1){
        $(this).show();
      }
      else {
        $(this).hide();
      }
    });
  }
  xyz();
  $('label.container input[type="radio"]').click(function(){
    xyz();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="container">Radio1
  <input type="radio" checked="checked" name="radio" value="Radio1">
  <span class="checkmark"></span>
</label>
<label class="container adult">Radio2
  <input type="radio" name="radio" value="Radio2">
  <span class="checkmark"></span>
</label>

<div class="select-items select-hide">
<div>1. Radio1 0</div>
<div>1.1. Radio1 - 1</div>
<div>1.2. Radio1 - 2</div>
<div>1.3. Radio1 - 3</div>
<div>1.4. Radio1 - 4</div>
<div>1.5. Radio1 - 5</div>
<div>1.5.1. Radio1 - 6</div>
<div>1.5.2. Radio1 - 7</div>
<div>1.5.3. Radio1 - 8 Loss</div>
<div>1.5.4. Radio1 - 9</div>
<div>1.6. Radio1 - 10</div>
<div>1.7. Radio1 - 11</div>
<div>2. Radio2 0</div>
<div>2.1. Radio2 - 1</div>
<div>2.2. Radio2 - 2</div>
<div>2.3. Radio2 - 3</div>
<div>2.4. Radio2 - 4</div>
</div>