Jaki dać argument w tej funkcji?

pytanie zadane 21 sierpnia 2020 w JavaScript przez Kubs Mądrala (5,190 p.)
edycja 21 sierpnia 2020 przez Kubs

Witajcie,

funkcja na stronie ma zrobić przeźroczyste elementy (czyli te które nie są zaznaczone), a zostawić widoczne te, których kategorie zaznaczono radio buttonem.

function switchColor(element) {
  var elementy = document.querySelectorAll("div."+element);
  elementy.forEach(function(element) {
    aktualne = element.style.opacity;
    wartosc=Math.abs(aktualne-1);
    
    element.setAttribute(wartosc);
  });  
}

I teraz, mam te konkretne casy ale nie wiem jak połączyć je z tą funkcją. Wiem tyle, ze trzeba zmienić jej argumenty.

 function getCategory(d) {
   switch (d) {
     case "red"
     case "blue"
     case "white"
    ...

A w kazdym z tych case mam kilka elementów którym nadałem id np.

{
  "type": "Feature",
  "properties": {
    "id": 3,
    "name": "square",
    "category": "red",

"type": "Feature",
  "properties": {
    "id": 2,
    "name": "line",
    "category": "red",

"type": "Feature",
  "properties": {
    "id": 5,
    "name": "circle",
    "category": "blue",
...

Jak więc podłączyć to pod funkcje, zeby pojawiala sie tylko jedna kategoria po zaznaczeniu jej radiobuttonem?

Update:

tutaj json jest wykorzystany w kodzie tzn. ta metoda getCategory()


   L.geoJSON(xhr.response, {
     pointToLayer: function (feature, latlng) {
       return L.marker(latlng, {
         icon: getCategory(feature.properties.category),
       });
     }

komentarz 22 sierpnia 2020 przez VBService Ekspert (254,260 p.)

Trochę z "innej beczki", ten kod:

<nav class="left-navbar">
          <div class="menu-strip"></div>
          <div class="menu-strip"></div>
          <div class="menu-strip"></div>

         <ul>

możesz zamienić na: 

<nav class="left-navbar">
          <div class="menu-strip"></div>

          <ul>

i w css dopisać:

nav.left-navbar:hover div.menu-strip{
  background-color: #123c69;
  box-shadow: none; // TO
}

div.menu-strip {
  margin: 0;
  padding: 0;
  width: 35px;
  height: 5px;
  background-color: white;
  box-shadow: 0px 10px white, 0px 20px white; // i TO
  margin-bottom: 5px;
  transition: .3s;
}

1	komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.) Ciekawe rozwiązanie :)

2 odpowiedzi

odpowiedź 21 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

    aktualne = element.style.opacity;
    wartosc=Math.abs(aktualne-1);

Odejmowanie 1 od opacity jest nie do końca prawidłowe, ponieważ to property przyjmuje wartości od 0 do 1 - każda wartość spoza tego przedziału będzie zaokrąglona do najbliższej granicy tego przedziału.

element.setAttribute(wartosc);

Metoda setAttribute przyjmuje dwa argumenty, więc powyższe powinno rzucić błędem - zmienna wartosc powinna być drugim parametrem, a pierwszym string 'opacity'.

Nie bardzo rozumiem dalszą część pytania. Funkcja getCategory przyjmuje argument d, który ma być kolorem sprawdzonym w case-ach, a te kolory określają (mogące się powtarzać) kategorie w JSON-ie. Funkcja switchColor jako argument przyjmuje element, który domyślam się, że może odnosić się do property name z JSON-a.

Ja to rozumiem tak, że na podstawie koloru chcesz zmieniać opacity elementowi o klasie z property name - jeśli tak, to do funkcji switchColor (wołanej w pętli - bo jest wiele tych obiektów) powinieneś przekazać cały obiekt żeby móc na podstawie koloru (przyporządkowanego kategorii) przesłać wartość z property name.

Ale nie wiem czy dobrze rozumiem Twój kod i problem. :)

komentarz 21 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Cześć, dzięki serdecznie za zainteresowanie.

Na stronie wyświetlam punkty, które są przypisane do różnych grup (w tym przypadku to case). Gdy zaznaczę radiobuttonem 'wyświetl grup red', pozostaną tylko punkty przypisane do case red, reszta punktów ma zniknąć. I tak samo adekwatnie w kolejnych przypadkach. Ostatnim jest przypadek 'wyświetl wszystkie'.

Zupełnie jak na mapie, na której zaznaczasz co wyświetlić lub po prostu wyświetlasz wszystko.

komentarz 21 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

W kodzie z codepena jest funkcja toggle-ująca wybrane elementy (wg koloru, wszystkie lub żadne):

function toggleVisibility(element) {
  switch (element) {
    case "all":
      switchGlobal("1");
      break;
    case "none":
      switchGlobal("0");
      break;
    case "red":
    case "yellow":
    case "blue":
      switchColor(element);
      break;
  }
}

U Ciebie jest funkcja getCategory, którą wołasz z przekazaniem kategorii - co już jest mylące, bo przekazujesz kategorię do funkcji, której nazwa sugeruje, że ma ją zwrócić? - getCategory(feature.properties.category) i tam jest switch po kolorach - dlaczego on nie może działać tak jak w funkcji toggleVisibility?

komentarz 21 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Ten kod z codepen jest tylko przykładem, a ja muszę zmienić go pod te case-y.

Pewnie że może tak działać, tylko jak to zrobić? :(

komentarz 21 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Ale co chcesz zmieniać? Przecież switch z funkcji toggleVisiblity robisz, to co chcesz żeby robił, więc czemu nie możesz wziąć kodu tamtej funkcji?

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Nie zapominajmy, że rozmawiasz z laikiem - holik v. laik :)

Chciałbym bardzo podążać za twoimi wskazówkami ale jestem na etapie kiedy pomału trzeba mi wskazać palcem.

Jakby nauczyciel chemii na początku roku w pracowni kazał stworzyć mi konkretną miksturę.. to byłoby dopiero 'buum' :)

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Hmm... nadal nie odpowiedziałeś na moje pytania: co chcesz zmieniać i dlaczego nie możesz użyć kodu tamtej funkcji toggleVisibility?

Całkiem poza tym - w kodzie HTML nie ma radio buttonów tylko puste linki z onclick-ami.

Przeczytałem jeszcze raz cel w Twoim problemie

Gdy zaznaczę radiobuttonem 'wyświetl grup red', pozostaną tylko punkty przypisane do case red, reszta punktów ma zniknąć. I tak samo adekwatnie w kolejnych przypadkach

I, z tego co widzę na codepen, to tam jest odwrotnie - kliknięcie w wybrany kolor/stan ukrywa elementy zamiast zostawić je widoczne, a ukryć pozostałe. Więc może o to Ci chodzi. Jeśli tak, to na początku funkcji switchColor możesz dodać te linijki:

  const allBoxes = document.querySelectorAll('#main .ramka');
  allBoxes.forEach(box => box.setAttribute('style', 'opacity: 0'));

, one ukryją wszystkie boxy, a reszta funkcji pokaże tylko wybrane.

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Hmm... nadal nie odpowiedziałeś na moje pytania: co chcesz zmieniać i dlaczego nie możesz użyć kodu tamtej funkcji toggleVisibility?

Wszystkie rzeczy wyświetlone są na mapie -> Naciskam w tym panelu np 'buses' i zostają na mapie wszystkie buses a reszta znika itd..

Zapewne można użyć tej funkcji, tylko nie wiem jak ją zmienić, żeby obsługiwała te casy z JSONa.

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

{
  "type": "Feature",
  "properties": {
    "id": 3,
    "name": "square",
    "category": "red"
  }
},
{ 
 "type": "Feature",
  "properties": {
    "id": 2,
    "name": "line",
    "category": "red"
  }
},
{
"type": "Feature",
  "properties": {
    "id": 5,
    "name": "circle",
    "category": "blue"
  }
}

Powyższy JSON zawiera wiele obiektów z '"type: "Feature"', a poniższy kod przekazuje konkretną kategorię z konkretnego feature.

L.geoJSON(xhr.response, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: getCategory(feature.properties.category),
    });
  }

Coś mi tu nie pasuje. Jeśli geoJSON zwraca całego JSONa, to do metody pointToLayer powinien trafić parametr features (cała kolekcja tych obiektów), a nie jeden z nich, bo wtedy feature.properties.category nie ma sensu, ponieważ features było by kolekcją, a nie pojedynczym obiektem. Jeśli do metody pointToLayer faktycznie trafia jeden obiekt, to skąd można wziąć dostęp do pozostałych z tego JSONa?

Umieść console.log('feature: ', feature) w tej metodzie (przed returnem) i pokaż co zwróci konsola.

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Oto co wyrzuciło w Scope w Chromie:

Local
Exception: TypeError: Cannot read property 'add' of undefined at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:121736 at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:121974 at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:140 at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:150
message: "Cannot read property 'add' of undefined"
stack: "TypeError: Cannot read property 'add' of undefined↵    at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:121736↵    at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:121974↵    at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:140↵    at https://unpkg.com/leaflet@1.5.1/dist/leaflet.js:5:150"

No chyba, że coś źle poszło ale ustawiłem breakpointa na tym consol.log

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Yyy... to błąd dotyczący użytej biblioteki leaflet. Co pokazał console.log?

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

https://imgur.com/a/ChhCkjO

29. <script src="question.js"></script>

40. <link rel="stylesheet" href="leaflet-beautify-marker-icon.css" />

41. <script src="leaflet-beautify-marker-icon.js"></script>

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czyli console.log('feature: ', feature) umieszczony w metodzie pointToLayer się nie wykonał? Funkcja pobierająca JSONa powoduje błąd Exception: TypeError: Cannot read property 'add' of undefined?

Nie wiem co tam się dzieje, ale te błędy, to problem na osobny temat.

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Dokładnie, ale mimo to wszystko działa bez zarzutu.

Co dalej możemy zadziałać w tym głównym temacie?

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

No ale jak "wszystko działa bez zarzutu", skoro pobieranie JSONa, z którego chciałeś pobierać kategorie nie działa, bo użyta biblioteka rzuca błędem?

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Biorąc pod uwagę ten fakt, to rzeczywiście tak jest jak mówisz.

Jaki kolejny krok?

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czy możesz podać cały kod, albo przynajmniej na tyle dużą cześć, żeby dało się to przetestować (odtworzyć błąd) i żeby można było sprawdzić funkcję pobierającą ten plik JSON?

Nie wiem dlaczego występuje błąd - z tak małej ilości kodu nie umiem tego wydedukować, a skoro problem dotyczy pobierania JSONa (na którego podstawie chcesz ustalać kategorie), to moim zdaniem nie ma sensu iść z tematem dalej dopóki nie rozwiąże się problemu z pobieraniem JSONa.

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Oczywiście masz rację. Wrzucę część, a jeśli będzie za mało to na bieżąco uzupełnię.

A czy myślisz, że nadawanie id elementom JSON to dobra metoda? Zastanawiam się, jak będzie wiadomo mając to id w JSON, które elementy należą do danej kategorii.

komentarz 22 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Nie wiem - zależy od struktury danych. Jeśli jest coś, po czym można jednoznacznie zidentyfikować daną rzecz, to specjalne nadawanie id jest raczej zbędne. Poza tym w Twoim JSON-ie są już przecież id-ki. Chyba, że dodałeś je specjalnie i pytasz, czy to miało sens - to patrząc na obecną strukturę, nadane id-ki się raczej przydadzą.

komentarz 22 sierpnia 2020 przez Kubs Mądrala (5,190 p.)

Nadałem im, ale skoro mowa o indywidualnej identyfikacji to kazdy punkt ma unikatowe koordynaty. Ale one oczywiście wskazuja na miejsce, a nie przynależność do konkretnego case-u np. 'bus stops'.

odpowiedź 23 sierpnia 2020 przez VBService Ekspert (254,260 p.)
edycja 23 sierpnia 2020 przez VBService

Zmodyfikuj ten kawałek:

function switchColor(element) {
  var elementy = document.querySelectorAll("div."+element);
  elementy.forEach(function(element) {
    aktualne = element.style.opacity;
    wartosc=Math.abs(aktualne-1);
    
    element.setAttribute("style","opacity:"+wartosc);
  });  
}

na to:

function switchColor(class_color) {
  var elementy = document.querySelectorAll("div.ramka");
  elementy.forEach(function(element) {
     wartosc = (element.classList.contains(class_color)) ? 1 : 0;
     element.setAttribute("style","opacity:"+wartosc);
  });  
}

in action - moja interpretacja Twojego kodu