有人可以帮我把这个 jQuery 代码翻译成 JS 吗？
[英]Can someone help me translate this jQuery code to JS?
问题描述
im having huge trouble trying to translate this code to js
我在尝试将此代码转换为 js 时遇到了巨大的麻烦
i spent my whole day on this and i have no idea how to translate the.not and.filter function into js.我花了一整天的时间在这上面，我不知道如何将.not and.filter function 翻译成 js。 I read multiple guides into translating jquery code into js but im slowly starting to give up on this我阅读了多个指南，将 jquery 代码翻译成 js，但我慢慢开始放弃这个
i added the js code with html and css to the other code snippet我将带有 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>
2 个解决方案
解决方案1
0 2021-03-04 19:10:59
I think you code will look something like this:我认为您的代码将如下所示：
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);
});
}
Of course there might be some small issues since I can't test it myself当然可能会有一些小问题，因为我自己无法测试
解决方案2
0 已采纳 2021-03-04 19:13:10
Your code is almost there, the parts where the logic needs amendment is around the retrieval of siblings and the addition/removal of the classes.您的代码几乎就在那里，逻辑需要修改的部分是围绕兄弟姐妹的检索和类的添加/删除。
In addition the two jQuery event handlers can be brought together as they both target the same event on the same collection of .list elements.此外，可以将两个 jQuery 事件处理程序放在一起，因为它们都针对同一个.list元素集合上的同一个事件。 Try this:尝试这个：
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>
The slight difference in the plain JS version is that it does not animate the transitions in the way that jQuery's show() and hide() methods do.纯 JS 版本的细微差别在于它不会像 jQuery 的show()和hide()方法那样为过渡设置动画。 You would need to implement that yourself.您需要自己实施。 It can be done using CSS though, adding/removing classes to toggle the element's visibility using the transition rule.它可以使用 CSS 来完成，添加/删除类以使用transition规则切换元素的可见性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.