Question

如果在这个特定的内部没有子div，我需要隐藏toggler_btn。我已经添加了数据属性，我认为必须要用它们来完成。但不确定。

我试过这个：

$('.toggler_btn').each(function () {
            var elem_id = $(this).data('id');

            if ($('.element_wrapper[data-parent="' + elem_id + '"]').children().length === 0) {
                $(this).hide();
            }
        });

它有效，但也许有更简单，更快捷的方法吗？

HTML：

<div id="wrapper">
            <div class="element_wrapper" data-id="20" data-parent="" style="display:none">
            <button class="toggler_btn" type="button" data-id="20" data-parent="">+</button>
            Building 1
            <button class="add_btn" type="button">Add</button>
            <button class="edit_btn" type="button" data-id="20" data-parent="">Edit</button>
            <button class="delete_btn" type="button" data-id="20">Delete</button>
        <div class="element_wrapper" data-id="25" data-parent="20" style="display:none">
            <button class="toggler_btn" type="button" data-id="25" data-parent="20">+</button>
            Something Else
            <button class="add_btn" type="button">Add</button>
            <button class="edit_btn" type="button" data-id="25" data-parent="20">Edit</button>
            <button class="delete_btn" type="button" data-id="25">Delete</button>
        </div>
        </div>

Answer 1

希望这能解决您的问题，否则请告诉我。

更新：我改变了我的一部分，使其更加动态，因此可以使用多个级别

＆＃13;

defusedxml==0.5.0

＆＃13;

$(document).ready(function() {
  $('div[data-parent=""]').show();

  $('.toggler_btn').on('click', function() {
    var id = $(this).attr('data-id');

    if ($('.element_wrapper[data-parent="' + id + '"]').children().length > 0) {
      $('.element_wrapper[data-parent="' + id + '"]').toggle();
      if ($(this).text() === '+') {
        $(this).html('-');
      } else {
        $(this).html('+');
      }


      var t = $('.element_wrapper[data-parent="' + id + '"]').children(".toggler_btn");
      if (t.siblings(".element_wrapper").length == 0) {
        $('.element_wrapper[data-parent="' + id + '"]').children(".toggler_btn").hide();
      }
    }
  });
});

＆＃13;

更新2：，因为您偶然发现了jquery代码，我更新了第二个代码段以匹配您的新代码。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="element_wrapper" data-id="20" data-parent="" style="display:none">
    <button class="toggler_btn" type="button" data-id="20" data-parent="">+</button> Building 1
    <button class="add_btn" type="button">Add</button>
    <button class="edit_btn" type="button" data-id="20" data-parent="">Edit</button>
    <button class="delete_btn" type="button" data-id="20">Delete</button>
    <div class="element_wrapper" data-id="25" data-parent="20" style="display:none">
      <button class="toggler_btn" type="button" data-id="25" data-parent="20">+</button> Something Else
      <button class="add_btn" type="button">Add</button>
      <button class="edit_btn" type="button" data-id="25" data-parent="20">Edit</button>
      <button class="delete_btn" type="button" data-id="25">Delete</button>
      <div class="element_wrapper" data-id="30" data-parent="25" style="display:none">
        <button class="toggler_btn" type="button" data-id="30" data-parent="25">+</button> Something Else
        <button class="add_btn" type="button">Add</button>
        <button class="edit_btn" type="button" data-id="30" data-parent="25">Edit</button>
        <button class="delete_btn" type="button" data-id="30">Delete</button>
      </div>
    </div>
  </div>

＆＃13;

$('.toggler_btn').each(function(i) {
  if (i == 0) {
    $(this).parent().show()
  }
  var elem_id = $(this).data('id');
  if ($('.element_wrapper[data-parent="' + elem_id + '"]').children().length === 0) {
    $(this).hide();
  }
});

$('.toggler_btn').on('click', function() {
  var id = $(this).attr('data-id');

  if ($('.element_wrapper[data-parent="' + id + '"]').children().length > 0) {
    $('.element_wrapper[data-parent="' + id + '"]').toggle();
    if ($(this).text() === '+') {
      $(this).html('-');
    } else {
      $(this).html('+');
    }
  }
});

＆＃13;

如果没有子div，则隐藏切换按钮

1 个答案: