个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我希望 3 个 radio 可见，其他 radio 隐藏在下拉菜单中。当从下拉列表中选择一个 radio 时，我希望它移动到可见 radio 中的第一个位置。第三个(或现在是第四个)可见 radio 应移至下拉列表中，以便我始终只有 3 个可见 radio 。
我不能简单地更改标签，因为我在剩余脚本中使用了 radio 的 ID(参见下面 js 脚本中的最后一行):
我只想使用普通 JS (没有 Jquery...)。
这是我的 html:
<div id="sourcecontainer">
<div> From
<div>
<input type="radio" id="fr" name="source" value="fr">
<label for="fr">fr</label>
</div>
<div>
<input type="radio" id="en" name="source" value="en">
<label for="en">en</label>
</div>
<div>
<input type="radio" id="auto" name="source" value="auto" checked>
<label for="auto">auto</label>
</div>
<nav id="topNav">
<a href="#" title="Others" id="othersLanguageSource">Others</a>
<ul id="listothersLanguageSource" style="list-style: none; display:none;">
<li><input type="radio" id="pr1" name="source" value="1">Preset 1</li>
<li><input type="radio" id="pr2" name="source" value="2">Preset 2</li>
<li><input type="radio" id="pr3" name="source" value="3">Preset 3</li>
<li><input type="radio" id="pr4" name="source" value="4">Preset 4</li>
</ul>
</nav>
</div>
<input id="text" type="text" value="" autofocus />
</div>
这是我的js:
...
var menuTopNav = document.getElementById('topNav');
menuTopNav.addEventListener('mouseover', function () {
var listothersLanguageSource = document.getElementById("listothersLanguageSource")
listothersLanguageSource.style.display = "block";
listothersLanguageSource.style.display = "block";
}, false);
menuTopNav.addEventListener('mouseout', function () {
var listothersLanguageSource = document.getElementById("listothersLanguageSource")
listothersLanguageSource.style.display = "none";
listothersLanguageSource.style.display = "none";
}, false);
var sourceLang = document.querySelector('input[name="source"]:checked').value;
...
...
最佳答案
试试这个
let langs = [
{ id: 'en', value: 'en', text: 'en' },
{ id: 'fr', value: 'fr', text: 'fr' },
{ id: 'auto', value: 'auto', text: 'auto', checked: true },
{ id: 'pr1', value: 'pr1', text: 'Preset 1' },
{ id: 'pr2', value: 'pr2', text: 'Preset 2' },
{ id: 'pr3', value: 'pr3', text: 'Preset 3' }
];
function render() {
let mainLanguageSource = '';
let othersLanguageSource = '';
langs.forEach((item, index) => {
if (index <= 2) {
mainLanguageSource += '<div>'
+ '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>'
+ '<label for="' + langs[index].id + '">' + langs[index].text + '</label>'
+ '</div>';
} else {
othersLanguageSource += '<li>'
+ '<input type="radio" id="' + langs[index].id + '" name="source" value="' + langs[index].value + '" ' + (langs[index].checked ? 'checked' : '') + '>'
+ '<label for="' + langs[index].id + '">' + langs[index].text + '</label>'
+ '</li>';
}
});
document
.getElementById('mainLanguageSource')
.innerHTML = mainLanguageSource;
document
.getElementById('listothersLanguageSource')
.innerHTML = othersLanguageSource;
// add event listeners
document.querySelectorAll('[name="source"]').forEach(function(input) {
input.addEventListener('change', function(event) {
let position;
langs.forEach((item, index) => {
if (item.id === event.target.value) {
position = index;
item.checked = true;
} else {
delete item.checked;
}
});
langs.unshift(langs.splice(position, 1)[0]);
render();
});
});
}
render();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="sourcecontainer">
<div> From
<div id="mainLanguageSource">
<!-- Filled from js -->
</div
<nav id="topNav">
<a href="#" title="Others" id="othersLanguageSource">Others</a>
<ul id="listothersLanguageSource" style="list-style:">
<!-- Filled from js -->
</ul>
</nav>
</div>
<input id="text" type="text" value="" autofocus />
</div>
</body>
</html>关于javascript - 更改单选按钮的顺序 : display the checked above the drop down list，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57374043/
25
4
0
我正在使用 gfx-hal，这需要我创建需要使用特定于其类型的函数显式销毁的资源。我想将这些类型的实例存储在结构中，并且我还想将清理它们与拥有结构的生命周期相关联，而不是手动管理它们的生命周期并可能在
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 7 年前。 Improve
我知道这一定是非常明显的事情，但我不明白。我有两个 div，一个可拖动，另一个带有 on:drop，当我将可拖动的 div 放到它上面时，它似乎没有被调用。我错过了什么？ 回复:https://sve
在下面的应用程序中，从未调用 drop 方法。放置目标 ( div2 ) 由 dragEnter 和 dragOver 事件中的取消事件指示，但不触发放置。 HTML 和 .dart 如下:
我已经使用 ng2 文件上传实现了文件删除。我面临的问题是，当文件被拖放到拖放区域之外时，浏览器会打开它。有什么办法可以防止这种事件发生吗？ Angular 2/4 最佳答案 是的，终于成功了。我希望
我是使用rust 的新手。我的简单代码 struct Foo{ data : & 'a String, } fn test_foo(){ let s1:String = String::
我希望 image.src 显示 id，而不是每个 的值。 drop.id 存在吗？这可以做到吗？或者id被锁定在中？当用户点击提交时，我需要传递表单中的值。 function swapImage
我正在使用一个数据框，我必须将两列(定量和销售)添加然后删除它们，然后将列名称的第一个字母大写。问题是当我使用 drop 时，它会将其保存到另一个数据帧。从文档来看，问题来自 inplace=fals
我想让 Drop left 而不是在 bootstrap 下拉按钮中下拉。我正在努力实现这一点，但我无法做到这一点，有人可以指导我这样做吗？ 这是我的代码 Small button
我在使用 Blazor 时遇到了一个奇怪的问题... 我有一个使用拖放功能的应用程序，它使用 .Net Core 3.1 运行良好。然而，无论我做什么，drop 事件现在都不会被解雇，我不知道为什么。
我希望能够移动(在灰色背景上，通过拖放)Bootstrap 2 提供的模态表单。谁能告诉我实现此目的的最佳实践是什么？ 最佳答案 默认情况下， Bootstrap 不附带任何拖放功能，但您可以添加一些
我试图在拖放过程中更改节点上的光标，但图像没有改变。我打电话 setCursor()在 DragDetectedEventHandler我的节点。我也试过调用 getParent().setCurso
我刚刚注意到您可以在 PostgreSQL 中编写两者。有什么区别还是只是“简化”的语法。据我所知，这两者的作用完全相同。 ALTER TABLE table DROP my_column; 对比 A
我将屏幕分为两个 DIV。在左侧的 DIV 中，我有一些 50x50 像素的 DIV，在右侧的 DIV 中，我有一个由 80x80 LI 组成的空网格 。左侧的 DIV 是可拖动的，一旦放到 LI 上
我正在使用这个库 Drop ，但是记录很差，我不明白如何使用它。首先我安装了: npm install tether-drop 我已经下载了 Drop.js，然后用 Tether 导入它(导入所有内容
我想使用 jQuery 处理拖放 HTML 5 功能。直到没有触发 drop 事件为止都可以。看看我的代码: A B C $('#columns .column').on({
我需要使用 mysqldump 和 replace 而不是 insert 并且在恢复时不删除数据库和表。但我需要删除并重新创建触发器和存储过程 为此，我将 mysqldump 与 --replace
在 CD 管道中，我使用下载构建工件任务将工件下载到目标目录。我的发布工件目录结构如下 drop --> 来源 --> abc.zip 现在的问题是，每当我下载工件时，它都会下载整个放置文件夹并将相同
您好，我正在开发拖放应用程序。我有一个可以沿着文档拖动的 DIV，并且文档中还有其他一些 div，我可以将一个 div 拖到其他 div，这会使页面变得困惑它在空的地方并禁用另一个 div 中的放置，
我有以下代码: $(".dropzone").on("dragover", function(ev) { ev.preventDefault();
我是一名优秀的程序员,十分优秀！