Question

我有两个div，第一个div为第1级，第二个div为第2级。

当我单击div LEVEL1中的复选框时。在DIV级别2中，我具有复选框以及Hyperlink（“ data-markeralllevel2”）。

现在，LEVEL1 DIV中基于复选框的ID要显示或隐藏DIV Level2中的HYPERLINK。

示例

级别1级别2

14 NewText的15 NewNo （14）

LEVEL 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>

Answer 1

您可以使用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>

隐藏带有标签的复选框

1 个答案: