Как перегнать jQuery в Javascript?

Здравствуйте!

Есть небольшой jQuery сприт, есть ли какой-то онлайн сервис для перегона его в чистый Javascript?

За ранее - спасибо большое!

jQuery('.how_it_works').each(function() {
    function Line(){

        const wrap = $('.how_it_works .block_line');

        const item1 = wrap.find('.item').eq(0),
            num1 = item1.find('.num'),
            num1X = num1.offset().left + num1.width() / 2,
            num1Y = num1.offset().top + num1.height() / 2;

        const item2 = wrap.find('.item').eq(1),
            num2 = item2.find('.num'),
            num2X = num2.offset().left + num2.width() / 2,
            num2Y = num2.offset().top + num2.height() / 2;

        const item3 = wrap.find('.item').eq(2),
            num3 = item3.find('.num'),
            num3X = num3.offset().left + num3.width() / 2,
            num3Y = num3.offset().top + num3.height() / 2;

        const item4 = wrap.find('.item').eq(3),
            num4 = item4.find('.num'),
            num4X = num4.offset().left + num4.width() / 2,
            num4Y = num4.offset().top + num4.height() / 2;

        const item5 = wrap.find('.item').eq(4),
            num5 = item5.find('.num'),
            num5X = num5.offset().left + num5.width() / 2,
            num5Y = num5.offset().top + num5.height() / 2;

        const svgLine = $('#svg-line');
        svgLine.offset({top: 0, left:0});

        const line12 = svgLine.find('.line-1-2'),
            line23 = svgLine.find('.line-2-3'),
            line34 = svgLine.find('.line-3-4'),
            line45 = svgLine.find('.line-4-5');

        line12.attr({'x1': num1X, 'y1': num1Y, 'x2': num2X, 'y2': num2Y});
        line23.attr({'x1': num2X, 'y1': num2Y, 'x2': num3X, 'y2': num3Y});
        line34.attr({'x1': num3X, 'y1': num3Y, 'x2': num4X, 'y2': num4Y});
        line45.attr({'x1': num4X, 'y1': num4Y, 'x2': num5X, 'y2': num5Y});

    }
    Line();
    $(window).on('load resize', function () {
        Line();
    });
});
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
You might not need jQuery
Как-то так

const wrappers = document.querySelectorAll('.how_it_works');
const svgLine = document.querySelector('#svg-line');
const line12 = svgLine.querySelector('.line-1-2');
const line23 = svgLine.querySelector('.line-2-3');
const line34 = svgLine.querySelector('.line-3-4');
const line45 = svgLine.querySelector('.line-4-5');

const setAttributes = (element, attrs) => {
	for (const attr in attrs) {
		element.setAttribute(attr, attrs[attr]);
	}
};

const line = (wrapper) => {
	const wrapperBox = wrapper.getBoundingClientRect();
	const items = wrapper.querySelectorAll('.block_line .item');
	const points = [];

	for (const item of items) {
		const element = item.querySelector('.num');
		const box = element.getBoundingClientRect();

		points.push({
			x: box.left + box.width / 2 - wrapperBox.left,
			y: box.top + box.height / 2 - wrapperBox.top
		});
	}

	svgLine.style.setProperty('top', 0);
	svgLine.style.setProperty('left', 0);

	setAttributes(line12, {
		x1: points[0].x,
		y1: points[0].y,
		x2: points[1].x,
		y2: points[1].y
	});
	setAttributes(line12, {
		x1: points[1].x,
		y1: points[1].y,
		x2: points[2].x,
		y2: points[2].y
	});
	setAttributes(line12, {
		x1: points[2].x,
		y1: points[2].y,
		x2: points[3].x,
		y2: points[3].y
	});
	setAttributes(line12, {
		x1: points[3].x,
		y1: points[3].y,
		x2: points[4].x,
		y2: points[4].y
	});
};

const start = () => {
	for (const wrapper of wrappers) {
		line(wrapper);
	}
};

start();

window.addEventListener('resize', start);

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Санкт-Петербург
от 160 000 до 220 000 ₽
07 мар. 2021, в 15:48
300000 руб./за проект
07 мар. 2021, в 15:26
7000 руб./за проект
07 мар. 2021, в 15:07
20000 руб./за проект