javascript 相关问题

我正在尝试用现有表单中的 Select2 替换标准。表单逻辑是用 Vanilla JS 编写的，客户端验证则留给浏览器。问题是我正在尝试用现有表单中的 Select2 替换标准 <select>。表单逻辑是用 Vanilla JS 编写的，客户端验证留给浏览器。问题是当我使用 Select2 组件时浏览器生成的错误消息的位置： document.querySelectorAll("[data-is=select2]").forEach(el => { // the Select2 component only works with JQuery objects let $jqo = $(el); $jqo.select2({ width: "auto", placeholder: el.firstElementChild.textContent }); // making sure select2 works with the existing handlers $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change"))); }); form { width: 20rem; } label { display: flex; align-items: center; column-gap: 1ch; } /* making select and Select2 occupy the remaining space */ select, .select2-container { flex-grow: 1; } <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />  <form> <p> <label> Greetings: <select data-is="select2" name="greetings" required> <option hidden disabled value="" selected>Select2 a Greetings</option> </select> </label> <p> <input type="submit" value="Select2 select"> </form> 单击按钮后可以看到，Select2 的验证消息被放置在 <label> 下，而不是 <select> 下。我该如何修复它？最好没有 JQuery。涂抹label { display: inline-grid; }，并稍微定位<select>： document.querySelectorAll("[data-is=select2]").forEach(el => { // the Select2 component only works with JQuery objects let $jqo = $(el); $jqo.select2({ width: "auto", placeholder: el.firstElementChild.textContent }); // making sure select2 works with the existing handlers $jqo.on("select2:select", ev => el.dispatchEvent(new Event("change"))); }); form { width: 20rem; } label { display: flex; align-items: center; column-gap: 1ch; display: inline-grid; grid-template-columns:auto auto; position: relative; select { bottom: 0; grid-column-start: 2; margin-left: 8px; } } /* making select and Select2 occupy the remaining space */ select, .select2-container { flex-grow: 1; } <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />  <form> <p> <label> Greetings: <select data-is="select2" name="greetings" required> <option hidden disabled value="" selected>Select2 a Greetings</option> </select> </label> <p> <input type="submit" value="Select2 select"> </form>

javascript css

回答 0 投票 0

根据变量状态更改类别

我按照基本的 JavaScript 教程构建了一个问题跟踪器，效果很好。我已经对其进行了一些自定义，并且想要更改与其状态相关的类/颜色，并且它有两个类

javascript

回答 1 投票 0

React 问答游戏中满足获胜条件时模态会打开两次

我正在构建一个 React 测验应用程序，一旦所有答案都正确或用户失去所有生命，就会出现一个模式。然而，尽管我尝试合作，该模式还是打开了两次而不是一次......

javascript reactjs

回答 1 投票 0

如何在循环使用车轮样式时保持油漆颜色，反之亦然？

我正在制作一个模拟汽车选择器页面来帮助我学习 JavaScript，并希望用户能够选择汽车颜色，然后选择车轮样式。骑车经过

javascript html css image logic

回答 1 投票 0

如何让我的弹出窗口出现在所有其他元素之上？

在 JSFiddle 示例中，如果单击一个元素框（而不是字母本身），则会打开一个弹出窗口，其中显示有关该元素的更多信息。如果单击顶部元素之一 (

javascript html css

回答 1 投票 0

在 Firefox 的 Canvas 中绘制线条时的抗锯齿

我正在尝试用画布绘制图表，并希望获得清晰的线条，而不是抗锯齿。我知道你需要使用 0.5 偏移量来使线条精确地落在屏幕像素上，但即使如此，我...

javascript html canvas

回答 3 投票 0

ckeditor5中的文字没有更新

对不起，我的英语不好。有这么一段代码：对不起，我的英语不好。有这么一段代码： <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.css" /> <body> <div id="addtext">button</div> <div id="inform"> <div class="editor"> <p>Hello from CKEditor 5!</p> </div> </div> </body> <script type="importmap"> { "imports": { "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.0/ckeditor5.js", "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.0/" } } </script> <script type="module"> import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph } from 'ckeditor5'; // При загрузки страницы ClassicEditor .create(document.querySelector('.editor'), { plugins: [Essentials, Bold, Italic, Font, Paragraph], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', ] }) .then( /* ... */) .catch( /* ... */); $("#addtext").on("click", function () { var a = $('.editor').html(); alert (a); }) </script> 我更改了ckeditor5表单中的文本并单击addtext，结果，我在警报中得到了旧文本。如何在 ckeditor5 表单中获取新文本？在此输入图片描述我需要动态更改文本。只需使用 CKEditor API editor.getData() let editor; ClassicEditor .create(document.querySelector('.editor'), { plugins: [Essentials, Bold, Italic, Font, Paragraph], toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', ] }) .then(newEditor => { editor = newEditor; }) .catch( /* ... */); $("#addtext").on("click", function () { var a = editor.getData(); alert (a); })

javascript jquery ckeditor5

回答 1 投票 0

BABEL 找不到模块“节点：路径”错误反应原生

我正在尝试将 tailwindcss-react-native 包设置到我的 React Native 项目中。成功安装后，当我向组件添加类名时，出现错误。我尝试过卸载并

javascript android react-native babeljs tailwind-css

回答 7 投票 0

比较数组js中的数组

这是一个嵌套数组[[1,5],[2,4],[6,8],[7,7]]，我需要将每个项目的第二个索引（出发）与以下项目进行比较第一个索引（到达）如下所示：5 >= 2, 4 >= 6, 8 >= 7 ...

javascript arrays nested

回答 1 投票 0

将 Ruby Red 编译为 javascript 的生产使用[已关闭]

关于将 ruby 编译为 Javascript 的能力（例如在这个 SO 问题或这个 github 线程中）已经有很多讨论。 Red 的原始版本已经很老了，但是 Julius Eckert ...