Show/hide div 如果它 contains/not 包含单选按钮值文本

Question

我的新项目有一个奇怪的任务。我有 2 个单选按钮，我必须根据单选按钮 selection 显示某些下拉菜单 div。所以单选按钮是 2，divs 是几个，但我希望它只显示某些 divs，具体取决于单选按钮 selection。我无法为 div 分配额外的 classes 和 ID，所以我想尝试制作一个 javascript 来检查无线电的值，看看它是否是包含在 div 中，仅显示包含单选值的 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>

编辑2：我忘了它还应该影响另一个 div 和 class select-selected 来显示 Radio2 div 的第一个。现在这有点棘手。

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

这是在 div 之上 class select-隐藏。

我没能成功。知道如何做或从哪里开始吗？

此致！

Answer 1

您可以向两者添加更改侦听器 input[radio]，然后在侦听器函数中，您 select 所有 div，隐藏它们，然后遍历每个检查其内容，如果它包含textContent 里面的 radio.value 然后显示它。

看下面的代码，如果有帮助的话

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

Show/hide div 如果它 contains/not 包含单选按钮值文本

Show/hide div if it contains/not contains radio button value text

html

javascript

jquery

button

radio