Как подставить имя класса под массив?

Question

[del993788]

Здравствуйте. Возможно вопрос в заголовке указан не верно, но я чётко сформулировать вопрос не могу... У меня просто не работает так, как я бы хотел(...

Ситуация такая. Есть массив с информацией о положениях X:Y. Выглядит это вот так:

var firstbox = ["-16","13"]
var secondbox = ["-10","11"]
...

В html у объектов у меня по 2 класса:

<div class="box firstbox">...</div>
<div class="box secondbox">...</div>

Есть анимация этих блоков:

$('.box').mousemove(function(event){
	gsap.to($(this), 1, {
	  x:mineclass[0],
	  y:mineclass[1],
	});
});

Я думал, что если в функции анимации прописать, что

var mineclass = this.classList[1];
console.log(mineclass) // вернёт имя класса.

то тогда можно будет обратиться к имени класса, как к массиву:
mineclass[0] // по логике тоже самое secondbox[0]
и у меня будет всё работать, но, как вы уже поняли, не работает у меня них*ена

Что в моём случае можно сделать? Как сделать, чтобы я мог зная класс подцепиться к списку массивов?

Answer 1

[del993788]

var boxes = {
	firstbox: ["-16","13"],
	secondbox: ["-10","11"]
};

var mineclass = this.classList[1];
console.log(mineclass) // вернёт имя класса.

var box = boxes[mineclass]; // выберет нужный массив из boxes
// тут можно устроить проверку, ведь может и не быть класса,
// который вы только добавили в HTML, но в скрипте ещё не добавили массив
var x = box[0];
var y = box[1];

Answer 2

[Stockholm Syndrome]

const data = {
  firstbox: ["-16","13"], 
  secondbox: ["-10","11"]
};

$('.box').mousemove(function() {
  const [x, y] = data[this.classList[1]];
  gsap.to($(this), 1, {x, y});
});

Comments

[del993788]

вы, наверно, не знаете, как работает gsap... Вид должен быть именно x: значение, y: значение. Как в вашем случае я могу подставить данные?

[Stockholm Syndrome]

qqignatqq, вы, наверное, не знаете, как работает деструктуризация
gsap.to($(this), 1, {x, y});
эквивалетно

gsap.to($(this), 1, {
  x: x, 
  y: y
});

[del993788]

Stockholm Syndrome, кто вам это сказал? По факту у меня массив выглядит так: [x,y, scale, rotate] и в функции у меня это

x: значение
y:значение
scale: значение
rotate: значение

[Stockholm Syndrome]

кто вам это сказал?

любой учебник по джаваскрипту

По факту у меня массив выглядит так: [x,y, scale, rotate] и в функции у меня это

x: значение
y:значение
scale: значение
rotate: значение

но в вопросе этого, конечно же, нет

ну добавьте эти значения, делов-то

const [x, y, scale, rotate] = data[this.classList[1]];
gsap.to($(this), 1, {x, y, scale, rotate});