#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
У меня есть несколько списков, и мне нужно обновить их общее количество после удаления одного li код работает хорошо, но после удаления li он не обновляется, так как обновить общее количество li после удаления одного? Я потратил много времени, чтобы найти решение, но мне не удалось!
var totalList = document.getElementById('total');
var deleteBtn = document.getElementsByClassName('delete');
var allList = document.querySelectorAll(".navbar-nav li");
var removeNotify = function(e) {
e.preventDefault();
var notifyItem = $(e.delegateTarget).parent();
var html = $('html');
html.css('overflowX', 'hidden');
notifyItem.addClass(notifyItem.data('animation-class'));
notifyItem.bind('oanimationend animationend webkitAnimationEnd', function() {
notifyItem.remove();
html.removeAttr('style');
});
};
$(function() {
$('.delete').on('click', removeNotify);
console.log(allList.length - 1);
});
// total li
var myList = document.getElementById('myList');
$('.delete').on('click', 'li', function(ev){
totalList.innerHTML = allList.length - 1
}); .navbar-expand-lg .navbar-nav {
-ms-flex-direction: column;
flex-direction: column;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-item {
text-align: left;
padding-left: 2rem;
border-bottom: 1px solid #252629;
padding: 1rem 2rem;
position: relative;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out;
}
.navbar-nav .title {
font-family: "Monda-Regular", sans-serif;
line-height: 1.75rem;
letter-spacing: .05rem;
}
.nav-item:hover:not(:first-child){
background-color: #4362B1;
}
.nav-item:hover p,
.nav-item:hover .date {
color: #E1E2E2;
}
.nav-item .delete {
display: block;
width: 16px;
height: 16px;
line-height: 15px;
font-weight: bolder;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50%;
cursor: pointer;
background-color: #637cbb;
visibility: hidden;
-webkit-transition: .1s all ease-in-out;
transition: .1s all ease-in-out;
}
.nav-item:hover .delete {
visibility: visible;
}
/*li animation on delete*/
@-webkit-keyframes minimize {
0% {
max-height: 10rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-width: 1px;
overflow: hidden;
}
100% {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
overflow: hidden;
}
}
@keyframes minimize {
0% {
max-height: 10rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-width: 1px;
overflow: hidden;
}
100% {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
overflow: hidden;
}
}
.navbar-nav li.minimize {
-webkit-animation-duration: .5s;
animation-duration: .5s;
animation-iteration: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.navbar-nav li.minimize {
-webkit-animation-name: minimize;
animation-name: minimize;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="notifyNum align-center d-flex justify-content-center align-items-center mr-auto">
<span id="total" class="fontSize12"></span>
</div>
<ul id="myList" class="navbar-nav w-100 align-left">
<li class="nav-item title">
<h1 class="p-0 m-0 weight700 fontSize20 gray6">Notifications</h1>
</li>
<li id="1" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-1 </h2>
<span class="delete text-center">amp;times;</span>
</li>
<li id="2" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-2 </h2>
<span class="delete text-center">amp;times;</span>
</li>
<li id="3" class="nav-item" data-animation-class="minimize">
<h2 class="notifyTitle weight600 fontSize16 gray5 mb-2">test-3 </h2>
<span class="delete text-center">amp;times;</span>
</li>
</ul> Мне нужно обновить общее количество списков и отобразить в div Я пробовал этот код, но не работает
var myList = document.getElementById('myList');
$('.delete').on('click', 'li', function(ev){
totalList.innerHTML = allList.length - 1
});
Комментарии:
1. Ваши селекторы находятся в обратном направлении. Это говорит jQuery.. «ищите
<li>внутренний класс удаления»2. Я удалил код из функции и до сих пор не работает!
Ответ №1:
Запросите allList селектор в функции on click. Var allList не обновляется каждый раз, когда вы нажимаете delete на то, как вы его закодировали.
Ниже приведен быстрый способ заставить его работать так, как вы хотите.
измените totalList.innerHTML = allList.length - 1 на:
$('.delete').on('click', function(ev) {
totalList.innerHTML = document.querySelectorAll(".navbar-nav li").length - 1
});
Sidenote — вы не исключаете элемент .title списка из allList . Я не уверен, является ли это преднамеренным, но просто отмечаю, что totalList всегда будет отображаться 1, даже если вы удалите все «тестовые» элементы…