Переупорядочить элементы, используя JavaScript

1

Я пытаюсь выполнить небольшое упражнение с кодом, которое сделал мой друг для меня. Точка приложения - это ввести имя актива в текстовое поле и с помощью 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>
  • 0
    Поскольку это упражнение по программированию, мне интересно, что еще вы сделали (кроме привязки обработчика событий для focusout )?
  • 0
    ну вот то, что я думал, заставит это работать, но это не так. $ ("assest1 "). focusin (function () {$ (span) .css (" vertical-align "," top ");}); $ ("assest2 "). focusin (function () {$ (span) .css (" vertical-align "," top ");}); $ ("assest3 "). focusin (function () {$ (span) .css (" vertical-align "," top ");});
Показать ещё 4 комментария
Теги:
textfield

1 ответ

0
Лучший ответ

У меня было свободное время, и я тоже хотел попробовать ваше упражнение.

Мое решение предполагает:

  1. Поле ввода ?asset=n, где n - это число, которое нужно изменить, всегда будет следовать шаблону ?asset=n.
  2. ES6 - это aok.
  3. CSS not обманывает.
  4. Игнорирование чего-либо другого, кроме последней версии Chrome... отлично.

С учетом сказанного, я хотел использовать заказы, предоставляемые CSS (я старая школа и вопреки тому, что другие могут сказать/что я недавно читал в режиме онлайн, я считаю, что разделение проблем на диком диком западе, что мы call front end development не мертв).

С учетом сказанного, shake-and-bake (tm) в некоторых переменных CSS, а повторная организация становится намного проще!

Мой эхо сосет (я не тратил слишком много времени на размышления об этом), но это один подход, который, как мы надеемся, другие могут извлечь уроки из (или познакомиться с чем-то новым...) Если вы думаете о способе оптимизации кода, я "Люблю это видеть!

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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню