堆栈内存溢出
  繁体   English   中英

JQuery 到 Vanilla JavaScript 的转换不起作用

[英]JQuery to Vanilla JavaScript Conversion Is Not Working

 原文  2022-05-21 09:13:18  6   2    javascript/ jquery

问题描述

我正在开发一个完全基于 vanilla JavaScript 的项目，该工具的工作是检查网站响应能力，但问题是我有该问题的 JQuery 代码，我正在尝试将其转换为纯 JavaScript，但它不起作用完全如此，你能看看这个问题并给出一个适当的解决方案吗？ 

 (function($) { $(document).ready( function() { $('.devices').on('click', 'a', function() { var device_selected = $(this).attr('href').replace('#', ''); $('.device').removeClass().addClass('device device-' + device_selected); }) }); })(jQuery); /*************** JS CODE (Not Working) ******************//* document.addEventListener("DOMContentLoaded", function() { document.querySelector('.devices').addEventListener('click', 'a', function() { var device_selected = document.querySelector(this).attr('href').replace('#', ''); document.querySelector('.device').classList.remove().classList.add('device device-' + device_selected); }); }); */
 .preview { overflow: hidden; } .preview .device { position: relative; width: 680px; height: 400px; margin: 0 auto; border: 1px solid #999; } .preview .device, .preview .device:after, .preview .device iframe { transition: all 0.5s ease; } .preview .device iframe { transform: scale(0.5); border-radius: 1em; } .preview .device:after { content: " "; background-color: #444; position: absolute; } .preview .device-desktop { width: 680px; height: 400px; padding: 1em 1em 5em; border-radius: 1em; } .preview .device-desktop:after { width: 3em; height: 3em; bottom: 1em; left: 47.5%; border-radius: 100em; } .preview .device-desktop iframe { width: 1360px; height: 800px; } .preview .device-tablet-p { width: 384px; height: 512px; padding: 1em 1em 3em; border-radius: 1em; } .preview .device-tablet-p:after { width: 1.5em; height: 1.5em; bottom: 0.75em; left: 47%; border-radius: 100em; } .preview .device-tablet-p iframe { width: 768px; height: 1024px; } .preview .device-tablet-l { width: 512px; height: 384px; padding: 1em 3em 1em 1em; border-radius: 1em; } .preview .device-tablet-l:after { width: 1.5em; height: 1.5em; left: 93.5%; bottom: 47%; border-radius: 100em; } .preview .device-tablet-l iframe { width: 1024px; height: 768px; } .preview .device-mobile-p iframe, .preview .device-mobile-l iframe { transform: scale(0.75); } .preview .device-mobile-p { width: 240px; height: 420px; padding: 1em 1em 3em; border-radius: 1em; } .preview .device-mobile-p:after { width: 2em; height: 2em; bottom: 0.5em; left: 45%; border-radius: 100em; } .preview .device-mobile-p iframe { width: 320px; height: 560px; } .preview .device-mobile-l { width: 420px; height: 240px; padding: 1em 3em 1em 1em; border-radius: 1em; } .preview .device-mobile-l:after { width: 2em; height: 2em; left: 91.5%; bottom: 45%; border-radius: 100em; } .preview .device-mobile-l iframe { width: 560px; height: 320px; } .preview iframe { margin: 0; border: 0; transform-origin: 0 0; } .devices { list-style: none; width: 100%; text-align: center; border-bottom: 1px solid #eee; margin: 0 0 2rem; padding: 0; } .devices > li { display: inline-block; line-height: 2em; margin: 0 1em 0 0; }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <section class="preview"> <ul class="devices"> <li><a href="#desktop">Desktop</a></li> <li><a href="#tablet-p">Tablet</a></li> <li><a href="#tablet-l">Tablet Landscape</a></li> <li><a href="#mobile-p">Mobile</a></li> <li><a href="#mobile-l">Mobile Landscape</a></li> </ul> <div class="device device-desktop"> <iframe src="https://www.lipsum.com/"></iframe> </div> </section> </body> </html>

2 个解决方案

解决方案1
 0  2022-05-21 10:12:24

document.addEventListener("DOMContentLoaded", function () {

            const devices = document.querySelector(".devices");
            const device = document.querySelector(".device");

            devices.addEventListener("click", function (e) {
                let element = e.target;
                if (element.nodeName === "A") {
                    let device_selected = element.getAttribute('href').replace('#', '');
                    // device.className = ''; // or device.removeAttribute('class');
                    device.className = 'device device-' + device_selected;
                }
            })
        });

vanilla 中的部分代码实际上是 jQuery，例如.attr 。

无论如何，在您的代码中，事件侦听器位于整个.devices ul上，然后只有当<a>标记是实际单击的内容时，我们才会采取行动。 这就是这里复制的内容。

试着点击左边的子弹。 该函数仍然运行，但if条件失败。

解决方案2
 0  2022-05-21 11:14:02

您可以在forEach()方法和map()方法的帮助下实现，因此请查看以下代码段。

有用的网址：

在 JavaScript 中添加类
https://www.w3schools.com/jsref/prop_element_classlist.asp

forEach()方法
https://www.w3schools.com/jsref/jsref_foreach.asp

map()方法
https://www.w3schools.com/jsref/jsref_map.asp

document.queryselectorall()方法
https://www.w3schools.com/jsref/met_document_queryselectorall.asp 

 document.addEventListener("DOMContentLoaded", function () { const device = document.querySelector(".device"); [...document.querySelectorAll('.devices a')].forEach((elem)=>{ elem.addEventListener('click', function (event) { event.preventDefault(); // preventing [...document.querySelectorAll('.devices a')].map((r)=> r.classList.remove('active')); //remove active class this.classList.add('active'); // add active class let device_selected = this.getAttribute('href').replace('#', ''); device.className = 'device device-' + device_selected; }) }); });
 .preview { overflow: hidden; } .preview .device { position: relative; width: 680px; height: 400px; margin: 0 auto; border: 1px solid #999; } .preview .device, .preview .device:after, .preview .device iframe { transition: all 0.5s ease; } .preview .device iframe { transform: scale(0.5); border-radius: 1em; } .preview .device:after { content: " "; background-color: #444; position: absolute; } .preview .device-desktop { width: 680px; height: 400px; padding: 1em 1em 5em; border-radius: 1em; } .preview .device-desktop:after { width: 3em; height: 3em; bottom: 1em; left: 47.5%; border-radius: 100em; } .preview .device-desktop iframe { width: 1360px; height: 800px; } .preview .device-tablet-p { width: 384px; height: 512px; padding: 1em 1em 3em; border-radius: 1em; } .preview .device-tablet-p:after { width: 1.5em; height: 1.5em; bottom: 0.75em; left: 47%; border-radius: 100em; } .preview .device-tablet-p iframe { width: 768px; height: 1024px; } .preview .device-tablet-l { width: 512px; height: 384px; padding: 1em 3em 1em 1em; border-radius: 1em; } .preview .device-tablet-l:after { width: 1.5em; height: 1.5em; left: 93.5%; bottom: 47%; border-radius: 100em; } .preview .device-tablet-l iframe { width: 1024px; height: 768px; } .preview .device-mobile-p iframe, .preview .device-mobile-l iframe { transform: scale(0.75); } .preview .device-mobile-p { width: 240px; height: 420px; padding: 1em 1em 3em; border-radius: 1em; } .preview .device-mobile-p:after { width: 2em; height: 2em; bottom: 0.5em; left: 45%; border-radius: 100em; } .preview .device-mobile-p iframe { width: 320px; height: 560px; } .preview .device-mobile-l { width: 420px; height: 240px; padding: 1em 3em 1em 1em; border-radius: 1em; } .preview .device-mobile-l:after { width: 2em; height: 2em; left: 91.5%; bottom: 45%; border-radius: 100em; } .preview .device-mobile-l iframe { width: 560px; height: 320px; } .preview iframe { margin: 0; border: 0; transform-origin: 0 0; } .devices { list-style: none; width: 100%; text-align: center; border-bottom: 1px solid #eee; margin: 0 0 2rem; padding: 0; } .devices > li { display: inline-block; line-height: 2em; margin: 0 1em 0 0; } .devices > li a{ color: #444; text-decoration: none; border-bottom: 3px solid transparent; } .devices > li a.active{ padding: 5px 0; color: #183ec5; border-bottom: 3px solid #183ec5; }
 <section class="preview"> <ul class="devices"> <li><a href="#desktop" class="active">Desktop</a></li> <li><a href="#tablet-p">Tablet</a></li> <li><a href="#tablet-l">Tablet Landscape</a></li> <li><a href="#mobile-p">Mobile</a></li> <li><a href="#mobile-l">Mobile Landscape</a></li> </ul> <div class="device device-desktop"> <iframe src="https://www.lipsum.com/"></iframe> </div> </section>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 需要从 Jquery 转换为 vanilla javascript jQuery转换为普通JavaScript不能正常工作 将此jQuery代码段转换为普通javascript（焦点无法正常工作） jQuery滑块转换为原始JavaScript无效 相当于 jQuery not() 的 Vanilla Javascript 香草JavaScript到jQuery的翻译 Jquery - &gt; vanilla javascript？ 原版javascript中的jQuery index() 将jquery转换为香草javascript 适用于香草javascript，但不适用于jquery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM