• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zakres atrybutu w selektorze CSS używanym w JS

VPS Starter Arubacloud
+2 głosów
150 wizyt
pytanie zadane 15 lutego 2022 w JavaScript przez Jcob2222 Użytkownik (500 p.)

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;

 

2 odpowiedzi

0 głosów
odpowiedź 15 lutego 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 15 lutego 2022 przez Jcob2222
 
Najlepsza

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;

 

+2 głosów
odpowiedź 15 lutego 2022 przez Comandeer Guru (603,480 p.)

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ąć?

komentarz 15 lutego 2022 przez Jcob2222 Użytkownik (500 p.)
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

Podobne pytania

0 głosów
1 odpowiedź 3,016 wizyt
pytanie zadane 3 sierpnia 2015 w JavaScript przez Tomohomo Nowicjusz (190 p.)
0 głosów
2 odpowiedzi 199 wizyt
pytanie zadane 27 kwietnia 2019 w HTML i CSS przez frederrer Użytkownik (740 p.)
0 głosów
2 odpowiedzi 426 wizyt
pytanie zadane 9 sierpnia 2022 w HTML i CSS przez skylar Nowicjusz (170 p.)

92,770 zapytań

141,695 odpowiedzi

320,518 komentarzy

62,107 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...