Question

我正在尝试做一个我朋友为我做的小代码练习。该应用程序的要点是在文本字段中键入资产名称，并使用javascript，框中的文本将向上移动到中心，当您键入另一个资产名称时，旧的名称将下降，新的将出现提升。以下是HTML，CSS＆amp; JavaScript代码，任何帮助都会很棒：）

＆＃13;

$(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");
});

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

我有空闲时间，也想尝试一下你朋友的运动。

我的解决方案假定：

输入框?asset=n，其中n是要更改的数字，将始终遵循模式?asset=n。
ES6是a-o-k。
CSS not作弊。
忽略除最新版Chrome之外的任何内容......完全没问题。

话虽如此，我想利用CSS提供的订购（我老学校，与其他人可能会说/我最近在线阅读的内容相反，我相信在野外分离 - 我们称之为front end development 的狂野西方并非死亡。“

据说，在一些CSS变量中摇动和烘烤（tm），重新安排变得多更容易！

我的算法糟透了（我没有花太多时间思考这个问题），但这是一种希望其他人可以学习的方法（或者被介绍给新的......）如果你认为一种优化代码的方法，我很乐意看到它！

JSFiddle：http://jsfiddle.net/6hmcv0tn/1/

＆＃13;

// 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});
}

＆＃13;

: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);
}

＆＃13;

<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>

＆＃13;

使用JavaScript重新排列元素

1 个答案: