Переписать код
Здравствуйте. Есть у меня такой код на jQuery. А как можно его же написать, но только на нативном JavaScript?
$(document).ready(function() {
var list = $(".wrapper-boxes .box");
var numToShow = 10;
var button = $("button");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
|
|
рони,
Цитата:
А у меня скрипт по кнопке выводит по N элементов. И когда уже все элементы показаны, кнопка скрывается. |
Cтранно смншивать show/hide и fadeIn
Это, насколькоя я помню, немного разные вещи. fadeIn делает элемент непрозрачным А show/hide показывают/убирают через display: Но, как написано, так и перевожу Определить дополнительно стили
/*Многие современные браузеры используют это по умолчанию, но лишним не будет*/
[hidden] {
display:none;
}
.fadein {
opacity: 1;
}
document.addEventListener("DOMContentLoaded", () => {
let list = document.querySelectorAll(".wrapper-boxes .box")
var numToShow = 10;
var button = document.querySelectorAll("button");
var numInList = list.length;
list.forEach(el => el.hidden = true)
if (numInList > numToShow) {
// button.show(); // ??? А как они были скрыты
// Если через hidden то
button.forEach(el => el.hidden = false)
}
list.slice(0, numToShow).forEach(el => el.hidden = false);
button.forEach(el => {
el.addEventListener("click", () => {
var showing = document.querySelectorAll('.wrapper-boxes .box:visible').length
list.slice(showing - 1, showing + numToShow).forEach(el => el.classList.add('fadein'));
var nowShowing = document.querySelectorAll('.wrapper-boxes .box:visible').length
if (nowShowing >= numInList) {
button.forEach(el => el.hidden = true)
}
})
})
})
|
Цитата:
|
LADYX,
структуру html неплохо было бы показать. |
рони,
Цитата:
<style>
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
position: relative;
margin: 5px;
width: 10px;
height: 10px;
background-color: black;
}
</style>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
Элементов .box естественно может быть много |
Цитата:
Выглядит так. Посмотрите код jquery. show/hide, если не заданы параметры меняют display: fadeIn даже без параметров меняет opacity: Только без параметров это делается мгновенно, без анимации. |
voraa,
все эти методы меняют и display и opacity, без параметров "мгновенно" это 400ms. есть разница, но в этом они одинаковы. |
LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
position: relative;
margin: 5px;
width: 10px;
height: 10px;
background-color: black;
}
.box.nextstop ~ .box {
display: none;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const limit = 5;
const nextOpen = (wrapper, button) => {
const boxs = wrapper.querySelectorAll(".box"),
len = boxs.length - 2,
endBox = wrapper.querySelector(".nextstop"),
index = [...boxs].indexOf(endBox) + limit;
if(endBox) endBox.classList.remove("nextstop");
if(index < len) boxs[index].classList.add("nextstop");
else button.remove()
}
document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
const button = wrapper.nextElementSibling;
button.addEventListener("click", nextOpen.bind(null,wrapper, button));
nextOpen(wrapper, button);
})
});
</script>
</head>
<body>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:27. |