我很难把这段代码翻译成js
我花了一整天的时间在这上面，我不知道如何将。not和。filter函数翻译成js。我读了很多关于将jquery代码翻译成js的指南，但我慢慢地开始放弃这个
我将带有HTML和CSS的js代码添加到其他代码片段中
// jQuery
$('.list').click(function(){
const value = $(this).attr('data-filter');
if (value == 'All'){
$('.imagebox').show('1000');
}
else {
$('.imagebox').not('.'+value).hide('1000');
$('.imagebox').filter('.'+value).show('1000');
}
})
// add active class on selected item
$('.list').click(function(){
$(this).addClass('active').siblings().removeClass('active');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>let ready = (callback) => {
if (document.readyState != "loading") callback()
else document.addEventListener("DOMContentLoaded", callback)
}
ready(() => {
var baseUrl = "/1/obrazki/";
// loading and listing files
function getFiles() {
var xhr = new XMLHttpRequest();
xhr.open("GET", baseUrl, true);
xhr.responseType = 'document';
xhr.onload = () => {
if (xhr.status === 200) {
var elements = xhr.response.getElementsByTagName("a");
for (x of elements) {
let imagebox;
if (x.href.match(/.(webp)$/)) {
imagebox = document.createElement("div");
imagebox.className = "imagebox";
let img = document.createElement("img");
img.src = x.href;
imagebox.appendChild(img);
document.getElementById("viewer").appendChild(imagebox);
}
// add classes from array
let datatypes = ["logo", "thumbnail", "graphic"]
for (var i of datatypes)
if (x.href.indexOf(i) > -1) {
imagebox.classList.toggle(i, true)
console.log(imagebox.classList);
}
// navbar sorting
let el = document.getElementsByClassName("list");
// loop to check if array of 'list' elements are clicked
for (var i = 0; i < el.length; i++) {
el[i].addEventListener("click", function() {
const value = this.getAttribute("data-filter")
console.log(imagebox.className)
if (value == "imagebox") {
imagebox.style.display = "block";
} else {
if (imagebox.classlist.contains(value)) {
imagebox.style.display = "none"
}
}
});
}
};
} else {
alert('Request failed. Returned status of ' + xhr.status);
}
}
xhr.send()
}
getFiles();
});body {
margin: 0px;
background-color: #242424;
}
#viewer {
display: flex;
flex-wrap: wrap;
}
.imagebox {
flex: 1;
min-width: 300px;
height: 300px;
margin: 5px;
}
.imagebox img {
position: flex;
flex-wrap: wrap;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.GalleryContainer {
width: calc(100% - 40px);
padding: 20px;
}
.GalleryContainer ul {
display: flex;
margin-bottom: 10px;
padding-left: 0px;
}
.GalleryContainer ul li {
list-style: none;
background: rgb(24, 24, 24);
color: #eee;
padding: 8px 20px;
margin: 5px;
letter-spacing: 1px;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
}
.GalleryContainer ul li.active {
background: #f4d003;
color: rgb(0, 0, 0);
}<!doctype html>
<html>
<head>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js%22%3E"></script> -->
<script src="gallery.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="GalleryContainer">
<ul>
<li class="list active" data-filter="imagebox">All</li>
<li class="list" data-filter="thumbnail">Thumbnails</li>
<li class="list" data-filter="logo">Logos</li>
<li class="list" data-filter="graphic">Graphics</li>
</ul>
<div id="viewer"></div>
</div>
</body>
</html>您的代码几乎完成了，逻辑需要修改的部分是围绕兄弟姐妹的检索和类的添加/删除。
另外，两个jQuery事件处理程序可以合并在一起，因为它们都针对相同的.list元素集合上的相同事件。试试这个:
document.querySelectorAll('.list').forEach(list => {
list.addEventListener('click', e => {
const value = e.target.dataset.filter;
document.querySelectorAll('.imagebox').forEach(imagebox => {
imagebox.style.display = (value == 'All' || imagebox.classList.contains(value)) ? 'block' : 'none';
});
e.target.classList.add('active');
Array.from(e.target.parentNode.children).forEach(sibling => {
if (sibling != e.target)
sibling.classList.remove('active');
});
});
});.active { color: #C00; }<div class="list active" data-filter="All">All</div>
<div class="list" data-filter="foo">Foo</div>
<div class="list" data-filter="bar">Bar</div>
<div class="imagebox foo">imagebox - foo</div>
<div class="imagebox bar">imagebox - bar</div>
<div class="imagebox foo">imagebox - foo</div>
<div class="imagebox bar">imagebox - bar</div>纯JS版本的细微差别是，它不像jQuery的show()和hide()方法那样使过渡动画化。你需要自己实现它。这可以通过使用CSS来实现，添加/删除类来使用transition规则来切换元素的可见性。
我认为你的代码应该是这样的:
const elements = document.getElementsByClassName("list");
const imageBoxes = document.getElementsByClassName("imagebox");
const imageBoxesArr = Array.from(imageBoxes);
Array.from(elements).forEach(el => {
el.addEventListener("click", function() {
const value = this.getAttribute("data-filter");
if (value === "All") {
toggleImageBoxesVisibility(imageBoxesArr, false);
} else {
toggleImageBoxesVisibility(imageBoxesArr, el.classList.contains(value));
}
});
});
function toggleImageBoxesVisibility(imagesBoxesArr, hide) {
imageBoxesArr.forEach(el => {
el.classLis.toggle('hidden', hide);
});
}
当然可能会有一些小问题，因为我不能自己测试它