Скрыть флажок с меткой - PullRequest
Новая
       11

Скрыть флажок с меткой

0 голосов
/ 16 марта 2020

У меня есть два div, первый div работает как уровень 1, второй div работает как уровень 2.

Когда я нажимаю на флажок из div LEVEL1. В DIV Level 2 у меня есть флажок, а также гиперссылка («data-markeralllevel2»).

Теперь на основе идентификатора флажка LIVEL1 DIV хотите показать или скрыть HYPERLINK из DIV Level2.

Пример

Уровень 1 Уровень2 14 NewText 15 NewNo (14)

Флажок в УРОВНЕ 2 DIV Скрыть ИЛИ показать рабочий FINE. Но как я могу скрыть или показать гиперссылку.

Вот мой jquery код. 

$("#sectionlistNew").on('click', '.chkremCFAllLevel1HP', function() {
  alert("HIHHHHH");
  marker_ref = $(this).attr('data-markerAllLevel1');
  console.log("Hello 1" + marker_ref);
  $("input[name=chkRolesALLLevel2]").each(function() {
    test_level = $(this).attr("data-markerCheckBoxAllLevel2");
    console.log("Hello2" + test_level);
    if ($(this).attr("data-markerCheckBoxAllLevel2") == marker_ref) {
      console.log("MATCH");
      console.log($(this).attr("data-markerCheckBoxAllLevel2"));
      $(this).show();
    } else {
      $(this).hide();
    }

  });
  console.log(marker_ref);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sectionlistNew">
  <input type="checkbox" class="level-one" id="14" value="wer" name="chkRolesALLLevel1" chk-marker="NewText">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="14"> NewText </a>

  <input type="checkbox" class="level-one" id="19" value="2020-03-09" name="chkRolesALLLevel1" chk-marker="NewD">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="19"> NewD</a>

  <input type="checkbox" class="level-one" id="22" value="2020-03-11" name="chkRolesALLLevel1" chk-marker="NNDate">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="22"> NNDate</a>

</div>
<div id="sectionlistLevel2New">
  <input type="checkbox" class="level-one" value="12" name="chkRolesALLLevel2" id="15" chk-marker="NewNo" data-markercheckboxalllevel2="14">
  <a href="javascript:void(0);" class="chkremCFAllLevel2HP" data-markeralllevel2="14">NewNo</a>
</div>

1 Ответ

0 голосов
/ 16 марта 2020

Вы можете использовать css для разрешения такого случая или все еще использовать jQ для управления видимостью, просто используйте соответствующие селекторы. Например, .hiddenClass + a - означает: следующий a сразу после блока с именем класса hiddenClass. 

$("#sectionlistNew").on('click', '.chkremCFAllLevel1HP', function() {
  alert("HIHHHHH");
  marker_ref = $(this).attr('data-markerAllLevel1');
  console.log("Hello 1" + marker_ref);
  $("input[name=chkRolesALLLevel2]").each(function() {
    test_level = $(this).attr("data-markerCheckBoxAllLevel2");
    console.log("Hello2" + test_level);
    var matched = $(this).attr("data-markerCheckBoxAllLevel2") == marker_ref;

    /* Take attention: `!matched` */

    $(this).toggleClass('hiddenClass', !matched); 
  });
  console.log(marker_ref);
});
.hiddenClass {
    display: none;
}

.hiddenClass + a {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sectionlistNew">
  <input type="checkbox" class="level-one" id="14" value="wer" name="chkRolesALLLevel1" chk-marker="NewText">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="14"> NewText </a>

  <input type="checkbox" class="level-one" id="19" value="2020-03-09" name="chkRolesALLLevel1" chk-marker="NewD">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="19"> NewD</a>

  <input type="checkbox" class="level-one" id="22" value="2020-03-11" name="chkRolesALLLevel1" chk-marker="NNDate">
  <a href="javascript:void(0);" class="chkremCFAllLevel1HP" data-markeralllevel1="22"> NNDate</a>

</div>
<div id="sectionlistLevel2New">
  <input type="checkbox" class="level-one" value="12" name="chkRolesALLLevel2" id="15" chk-marker="NewNo" data-markercheckboxalllevel2="14">
  <a href="javascript:void(0);" class="chkremCFAllLevel2HP" data-markeralllevel2="14">NewNo</a>
</div>
...