Zakres atrybutu w selektorze CSS używanym w JS

Question

Dzień dobry!

Chciałbym aby ten kod odnosił się do elementu który ma wartość x1 taką samą jak cx oraz w przedziale 10 w lewo i w prawo. To znaczy: chcę aby pobierało element którego x1 jest równy cx oraz mieści się w zakresie od cx-10 do cx+10.

Apath = document.querySelector('line[x1="'+cx+'"]').id;

 

Answer 1

Z tego co wiem, atrybucyjny selektor CSS nie obsługuje przedziałów liczbowych. Więc raczej musisz ręcznie wypisać wszystkie możliwe kombinacje (łącząc je selektorem listy), które chcesz obsługiwać, np.:

Apath = document.querySelector(`
  line[x1="${cx - 2}"],
  line[x1="${cx - 1}"],
  line[x1="${cx}"],
  line[x1="${cx + 1}"],
  line[x1="${cx + 2}"],
`.trim()).id;

Ewentualnie przenieść etap wyliczania do jakiejś pętli i mieć to reużywalne, np. (zasięg od -3 do 3, żeby dane wyjściowe nie zajęły dużo miejsca):

const getRangeSelectors = (createSelector, value, minOffset, maxOffset) => {
  const rangeSelectors = [];

  for (let offset = minOffset; offset <= maxOffset; offset++) {
    rangeSelectors.push(createSelector(value + offset, offset < maxOffset));
  }

   return rangeSelectors;
};

const selectors = getRangeSelectors((rangeValue, willBeNext) => {
    const optionalListSeparator = willBeNext ? ',' : '';
    
    return `line[x1="${rangeValue}"]${optionalListSeparator}`;
}, 0, -3, 3);
// 0: "line[x1=\"-3\"],"
// 1: "line[x1=\"-2\"],"
// 2: "line[x1=\"-1\"],"
// 3: "line[x1=\"0\"],"
// 4: "line[x1=\"1\"],"
// 5: "line[x1=\"2\"],"

Apath = document.querySelector(selectors).id;

 

Answer 2

Napisz sobie funkcję, która będzie Ci generowała taki selektor. Podajesz jej wartość cx i na tej podstawie generujesz tablicę wszystkich selektorów dla każdej wartości cx osobno. Na końcu se robisz z tego jeden selektor przy pomocy tablicaSelektorow.join( ',' ).

Inna rzecz, że mam wrażenie, że to XY problem. Co chcesz tak naprawdę osiągnąć?

Comments

Głównym problemem, który chce rozwiązać jest to:

https://forum.pasja-informatyki.pl/560119/javascript-svg

Teraz próbuję wybrać wszystkie linie które mają x1 lub x2 podobne do cx aktualnie przenoszonego elementu i ustawiać im za pomocą pętli x1 lub x2 równe cx