Jaki dać argument w tej funkcji?

Question

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),
       });
     }

 

Comments

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;
}

 

---

Ciekawe rozwiązanie :)

Answer 1

    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. :)

Comments

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

Jaki kolejny krok?

---

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.

---

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.

---

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ą.

---

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'.

Answer 2

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 

Comments

Super, taką właśnie logikę próbuję wdrożyć do tej wersji z JSONem.

Mógłbyś dopisać objaśnienie swojego kodu? Nie do końca łapę co i jak.