使用 JavaScript 重新排列元素
Re-arrange elements using JavaScript
我正在尝试做一个我的朋友为我做的小代码练习。该应用程序的要点是在文本字段中键入资产名称并使用 javascript 框中的文本将向上移动到中心,当您输入另一个资产名称时,旧的将向下移动并且新的将向上移动。下面是 HTML、CSS 和 JavaScript 代码,任何帮助都会很棒:)
$(function() {
$("input[name='faux-address-bar']").focusout(function() {})
})
$("assest1").focusin(function(){
$(span).css("vertical-align", "top");
});
$("assest2").focusin(function(){
$(span).css("vertical-align", "top");
});
$("assest3").focusin(function(){
$(span).css("vertical-align", "top");
});
body {
margin: 20px;
font-family: arial;
}
.container div {
border: 1px solid black;
width: 49%;
float: left;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 20px;
&:first-child {
width: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
&:nth-child(3) {
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="?asset=1" name="faux-address-bar">
<div class="container">
<div id="asset1"><span>ASSET 1</span></div>
<div id="asset2"><span>ASSET 2</span></div>
<div id="asset3"><span>ASSET 3</span></div>
</div>
我有一些空闲时间,也想试试你朋友的运动。
我的解决方案假定:
- 输入框
?asset=n
,其中 n
是要更改的数字,将始终遵循 ?asset=n
. 模式
- ES6 是
a-o-k
.
- CSS 是
not
作弊。
- 忽略最新版本 Chrome 以外的任何内容...完全没问题。
话虽如此,我想利用 CSS 提供的排序(我是老派,与其他人可能相反 say/that 我最近在网上阅读,我相信 Separation-of -我们称之为 front end development
的狂野西部的担忧并未 消亡)。
话虽如此,在一些 CSS 变量中摇晃和烘烤 (tm),重新排列变得 容易得多 !
我的算法很糟糕(我没有花太多时间考虑这个),但这是一种希望其他人可以学习的方法(或被介绍给新事物......)如果你想出一种方法优化代码,我很乐意看到它!
JSFiddle:http://jsfiddle.net/6hmcv0tn/1/
// Look ma, no globals!
{
// Cache queried elements for quicker reference
let input = document.querySelector('[name="faux-address-bar"]');
let container = document.querySelector('.container');
let children = container.querySelectorAll('div');
// Define our onkeyup handler
let handler = e => {
// Because we assume ?asset=n is constant, we can
// reference the number after = as our element to
// re-arrange
let val = e.target.value;
let assetIndex = val.split('=')[1];
// Check for presence of element to re-arrange
if (assetIndex && container.querySelector('#asset' + assetIndex)) {
// CSS3 variable keys to modify
let keys = ['--first-item', '--second-item', '--third-item'];
// Our forEach callback for re-arranging elements
let swapper = (order, idx) => {
let el = children[idx];
el.style.setProperty(keys[idx], order);
}
// Default ordering of elements using CSS3
// flexbox ordering
let set = [1,2,3];
// Updates ordering based on asset entered
switch (assetIndex) {
case '1':
set = [2, 1, 3];
break;
case '3':
set = [1, 3, 2];
break;
default:
break;
}
// Blindly loop over set and apply order to elements
set.forEach(swapper);
}
}
// Registers our key up handler
input.addEventListener('keyup', handler, true);
// For fun, update the order on load
handler({target: input});
}
:root {
--first-item: 1;
--second-item: 2;
--third-item: 3;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container>div {
width: 100px;
height: 100px;
border: 5px solid #aec8f2;
border-radius: 20px;
background-color: #5b7193;
color: #fff;
font-family: monospace;
justify-content: center;
align-items: center;
display: flex;
margin: 20px;
transition: all 1s;
font-size: 30px;
}
input {
width: 300px;
height: 30px;
margin: 0 auto;
display: block;
text-align: center;
border-radius: 20px;
border: 5px solid #d8efc2;
background-color: #82996c;
color: #fff;
font-size: 20px;
}
.container div:nth-child(1) {
order: var(--first-item);
}
.container div:nth-child(2) {
order: var(--second-item);
}
.container div:nth-child(3) {
order: var(--third-item);
}
<input type="text" value="?asset=1" name="faux-address-bar">
<div class="container">
<div id="asset1"><span>1</span></div>
<div id="asset2"><span>2</span></div>
<div id="asset3"><span>3</span></div>
</div>
我正在尝试做一个我的朋友为我做的小代码练习。该应用程序的要点是在文本字段中键入资产名称并使用 javascript 框中的文本将向上移动到中心,当您输入另一个资产名称时,旧的将向下移动并且新的将向上移动。下面是 HTML、CSS 和 JavaScript 代码,任何帮助都会很棒:)
$(function() {
$("input[name='faux-address-bar']").focusout(function() {})
})
$("assest1").focusin(function(){
$(span).css("vertical-align", "top");
});
$("assest2").focusin(function(){
$(span).css("vertical-align", "top");
});
$("assest3").focusin(function(){
$(span).css("vertical-align", "top");
});
body {
margin: 20px;
font-family: arial;
}
.container div {
border: 1px solid black;
width: 49%;
float: left;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 20px;
&:first-child {
width: 100%;
margin-top: 20px;
margin-bottom: 10px;
}
&:nth-child(3) {
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="?asset=1" name="faux-address-bar">
<div class="container">
<div id="asset1"><span>ASSET 1</span></div>
<div id="asset2"><span>ASSET 2</span></div>
<div id="asset3"><span>ASSET 3</span></div>
</div>
我有一些空闲时间,也想试试你朋友的运动。
我的解决方案假定:
- 输入框
?asset=n
,其中n
是要更改的数字,将始终遵循?asset=n
. 模式
- ES6 是
a-o-k
. - CSS 是
not
作弊。 - 忽略最新版本 Chrome 以外的任何内容...完全没问题。
话虽如此,我想利用 CSS 提供的排序(我是老派,与其他人可能相反 say/that 我最近在网上阅读,我相信 Separation-of -我们称之为 front end development
的狂野西部的担忧并未 消亡)。
话虽如此,在一些 CSS 变量中摇晃和烘烤 (tm),重新排列变得 容易得多 !
我的算法很糟糕(我没有花太多时间考虑这个),但这是一种希望其他人可以学习的方法(或被介绍给新事物......)如果你想出一种方法优化代码,我很乐意看到它!
JSFiddle:http://jsfiddle.net/6hmcv0tn/1/
// Look ma, no globals!
{
// Cache queried elements for quicker reference
let input = document.querySelector('[name="faux-address-bar"]');
let container = document.querySelector('.container');
let children = container.querySelectorAll('div');
// Define our onkeyup handler
let handler = e => {
// Because we assume ?asset=n is constant, we can
// reference the number after = as our element to
// re-arrange
let val = e.target.value;
let assetIndex = val.split('=')[1];
// Check for presence of element to re-arrange
if (assetIndex && container.querySelector('#asset' + assetIndex)) {
// CSS3 variable keys to modify
let keys = ['--first-item', '--second-item', '--third-item'];
// Our forEach callback for re-arranging elements
let swapper = (order, idx) => {
let el = children[idx];
el.style.setProperty(keys[idx], order);
}
// Default ordering of elements using CSS3
// flexbox ordering
let set = [1,2,3];
// Updates ordering based on asset entered
switch (assetIndex) {
case '1':
set = [2, 1, 3];
break;
case '3':
set = [1, 3, 2];
break;
default:
break;
}
// Blindly loop over set and apply order to elements
set.forEach(swapper);
}
}
// Registers our key up handler
input.addEventListener('keyup', handler, true);
// For fun, update the order on load
handler({target: input});
}
:root {
--first-item: 1;
--second-item: 2;
--third-item: 3;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container>div {
width: 100px;
height: 100px;
border: 5px solid #aec8f2;
border-radius: 20px;
background-color: #5b7193;
color: #fff;
font-family: monospace;
justify-content: center;
align-items: center;
display: flex;
margin: 20px;
transition: all 1s;
font-size: 30px;
}
input {
width: 300px;
height: 30px;
margin: 0 auto;
display: block;
text-align: center;
border-radius: 20px;
border: 5px solid #d8efc2;
background-color: #82996c;
color: #fff;
font-size: 20px;
}
.container div:nth-child(1) {
order: var(--first-item);
}
.container div:nth-child(2) {
order: var(--second-item);
}
.container div:nth-child(3) {
order: var(--third-item);
}
<input type="text" value="?asset=1" name="faux-address-bar">
<div class="container">
<div id="asset1"><span>1</span></div>
<div id="asset2"><span>2</span></div>
<div id="asset3"><span>3</span></div>
</div>