主页 / 问题 / 931886
Accepted
Nice
Asked:2020-01-14 16:41:50 +0000 UTC2020-01-14 16:41:50 +0000 UTC

DOM 元素不按条件出现

  • 772

消息“属性列表为空。”不会出现。删除列表中的所有属性后，我无法理解原因，尽管我在代码中写了我需要的所有内容：

$(".delete_1").click(function() {
  $(".list__item_1").remove()
});
$(".delete_2").click(function() {
  $(".list__item_2").remove()
});
$(".delete_3").click(function() {
  $(".list__item_3").remove()
});

if ($(".list__item").length == 0) {
  $(".list__without_item").css("display", "block");
} else if ($(".list__item").length > 0) {
  $(".list__without_item").css("display", "none");
};
.list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

javascript

3 个回答

  1. Best Answer

    也许在您的代码中，一切都与此示例中的不同，但特别是在这里，您的条件挂在一个难以理解的地方，并且不是在您删除元素时执行，而是在您的处理程序工作之前执行。理智一点，写一个delete handler，在里面触发你自己的list值，检查list值的条件，如果list为空，显示一条消息。

    var $list = $('.list__favors');
$list.on('click', '.list__item_close', function() {
  $(this).parent().remove();
  $list.trigger('change');
});
$list.on('change', function() {
  var $message = $list.find('.list__without_item');
  if ($list.find('.list__item').length > 0) {
    $message.hide();
  } else {
    $message.show();
  }
});
    .list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

    • 2

  2. 稍微改进了代码。

    $('.delete').on('click', (e) => {
  $(e.target).parent().remove();
  isEmpty();
});

var isEmpty = () => {
  if ($('.list__favors .list__item').length === 0) {
    $('.list__without_item').css('display', 'block');
  } else {
    $('.list__without_item').css('display', 'none');
  }
};

isEmpty();
    .list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete">Удалить</div>
    Свойство 3
  </div>
</div>

    • 2 

  3. let isEmpty = () => {
  if ($(".list__item").length == 0) {
    $(".list__without_item").css("display", "block");
  } else if ($(".list__item").length > 0) {
    $(".list__without_item").css("display", "none");
  };
}

isEmpty();

$(".delete_1").click(function() {
  $(".list__item_1").remove();
  isEmpty();
});
$(".delete_2").click(function() {
  $(".list__item_2").remove();
  isEmpty();
});
$(".delete_3").click(function() {
  $(".list__item_3").remove();
  isEmpty();
});
    .list__item {
  max-width: 250px;
  position: relative;
  padding: 10px;
  border-radius: 5px;
  background: #f4f4f4;
  color: #000;
  margin-bottom: 3px;
}

.list__item_close {
  position: absolute;
  top: 0;
  left: 100%;
  width: 70px;
  height: 20px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__favors">
  <p class="list__without_item">Список свойств пуст.</p>
  <div class="list__item list__item_1">
    <div class="list__item_close delete_1">Удалить</div>
    Свойство 1
  </div>
  <div class="list__item list__item_2">
    <div class="list__item_close delete_2">Удалить</div>
    Свойство 2
  </div>
  <div class="list__item list__item_3">
    <div class="list__item_close delete_3">Удалить</div>
    Свойство 3
  </div>
</div>

    • 1

相关问题