многоэлементное моделирование в javascript - PullRequest
Новая
       6

многоэлементное моделирование в javascript

0 голосов
/ 09 ноября 2019

Не так давно я создал небольшую библиотеку, используя jQuery для интервалов (поля и отступы).

Теперь я пытаюсь переключить эту библиотеку на чистый Javascript с вашей помощью:)

Вот мой код JS: 

// Useful Vars
let dataAttr = "[data-m], [data-mt], [data-mr], [data-mb], [data-ml], [data-my], [data-mx], [data-p], [data-pt], [data-pr], [data-pb], [data-pl], [data-py], [data-px]";
let dataSpacing = $("[data-spacing]").find(dataAttr);
let p = "px";

// Margin
const marginSpacing = () => {
  dataSpacing.each(function() {
    $(this).css({
      'margin': $(this).attr("data-m") + p,
      'margin-top': $(this).attr("data-mt") + p,
      'margin-right': $(this).attr("data-mr") + p,
      'margin-bottom': $(this).attr("data-mb") + p,
      'margin-left': $(this).attr("data-ml") + p,
    });
  });
};marginSpacing()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body data-spacing>
  <p data-mt="20">Text</p>
  <p data-mr="20">Text</p>
  <p data-mb="20">Text</p>
  <p data-ml="20">Text</p>
</body>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

Хорошо, поэтому проблема была решена благодаря приведенному выше коду "connectxo".

Но я должен отредактировать код, чтобы он был эквивалентен моему коду ..

Вот как выглядит мой кодсейчас: 

let dataAttr = "[data-m], [data-mt], [data-mr], [data-mb], [data-ml], [data-my], [data-mx], [data-p], [data-pt], [data-pr], [data-pb], [data-pl], [data-py], [data-px]";
let dataSpacing = [...document.querySelectorAll('[data-spacing]')].map(el => el.querySelectorAll(dataAttr));
let p = "px";

dataSpacing.forEach(dataSpacingDataEls => {
  dataSpacingDataEls.forEach(el => {
    el.style.margin = el.dataset.m + p;
    el.style.marginTop = el.dataset.mt + p;
    el.style.marginRight = el.dataset.mr + p;
    el.style.marginBottom = el.dataset.mb + p;
    el.style.marginLeft = el.dataset.ml + p;
  })
})

Кредиты @connexo, еще раз спасибо:).

0 голосов
/ 09 ноября 2019

Это было бы так: 

let dataAttr = "[data-m], [data-mt], [data-mr], [data-mb], [data-ml], [data-my], [data-mx], [data-p], [data-pt], [data-pr], [data-pb], [data-pl], [data-py], [data-px]";
let dataSpacing = [...document.querySelectorAll('[data-spacing]' )].map(el => el.querySelectorAll(dataAttr));

dataSpacing.forEach(dataSpacingDataEls => {
  dataSpacingDataEls.forEach(el => {
    el.style.margin = el.dataset.m;
    el.style.marginTop = el.dataset.mt;
    el.style.marginRight = el.dataset.mr;
    el.style.marginBottom = el.dataset.mb;
    el.style.marginLeft = el.dataset.ml;
  })
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...