Показать / скрыть div, если он содержит / не содержит текст значения переключателя

Question

У меня странное задание в моем новом проекте. У меня есть 2 радиокнопки, и я должен отображать некоторые выпадающие дивы в зависимости от выбора радиокнопки. Значки переключателей равны 2, а элементов div - еще несколько, но я хочу, чтобы они отображали только определенные элементы div в зависимости от выбора переключателя. Я не могу назначить дополнительные классы и идентификаторы для div, поэтому мне пришло в голову сделать javascript, чтобы проверить значение radio и посмотреть, содержится ли он в div, и показать только div, которые содержат значение radio. Вот пример: РЕДАКТИРОВАТЬ: Добавлено 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: Я забыл, что это также должно повлиять на другой div с выбранным классом, чтобы показать первый из Radio2 div. Теперь это немного сложно.

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

Это сверху div с классом select-hide.

Мне не удалось это сделать. Есть идеи, как это сделать или с чего начать?

Привет!

Answer 1

Вы можете сделать это так ... используя 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>

Answer 2

Вы можете добавить слушателя изменения к обоим input[radio], затем внутри функции слушателя вы выбираете все div, скрываете их, а затем просматриваете каждый из них, проверяя его содержимое, если оно содержит radio.value внутри * 1003. * тогда покажи это.

См. Код ниже, если это поможет

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