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

Rotacja tablicy w JavaScript

VPS Starter Arubacloud
+2 głosów
187 wizyt
pytanie zadane 20 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
edycja 20 czerwca 2021 przez xjafajx
Cześć,

Mam problem z js.

Chcę zaimplementować responsywne menu. Mam na myśli to, że kiedy jestem na stronie startowej, strona startowa jest na pierwszym miejscu na liście. Jeśli jestem na stronie kontaktowej, kontakt jest pierwszy na liście.

Menu to okrąg z poruszającymi się po nim ikonami. Pierwszy element na liście znajduje się na dole koła.

Podsumowując, muszę zmienić dynamicznie listę w skrypcie js w zależności od podstrony, na której się znajduję.

Wiem, że mogę utworzyć kilka plików js i to zadziała, ale chcę spróbować w js lub HTML.

Dzięki za wszelką pomoc

Link do podglądu:stackoverflow.com/questions/68041721/responsive-menu-in-javascript

Kod źródłowy znajduje się na stackoverflow.

Dokładniej mam problem jak przerobić te listę var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]; Aby na każdej stronie menu zaczynało się odpowiednio do strony czyli na stronie index.html menu zaczyna się od Start, na stronie First.html menu zaczyna się od first na stronie contact.html menu zaczyna się od Contact itd. Div w HTML <div class="name_container"> <p class="pn">Start</p> <p class="more">READ MORE</p> </div>

Proszę o pomoc. Dziękuję za wszelką pomoc

3 odpowiedzi

+2 głosów
odpowiedź 20 czerwca 2021 przez tangarr Mędrzec (154,780 p.)

Wystarczy, żebyś zdejmował pierwszy element tablicy i przerzucał go na koniec tak długo aż nie będziesz miał wymaganego elementu na pierwszym miejscu.
 

var planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"]

while (planet[0] != 'Third') {
    let head = planet.shift()
    planet.push(head)
}

 

komentarz 20 czerwca 2021 przez xjafajx Użytkownik (740 p.)

Dziękuję za pomoc kod jest pożyteczny ale miałbym jeszcze do niego kilka pytań.

1. Jak widać każdy element tablicy to osobna podstrona jak zatem zaimplementować aby sam mi wykrywał na jakiej jestem stronie i wyświetlał odpowiednią nazwę?

            		<div class="name_container">
              			<p class="pn">Start</p>
              			<p class="more">READ MORE</p>
            		</div>

W HTML wpisuję nazwę aktualnie wyświetlanej strony niestety na każdej stronie wpisuję osobno nazwę. Chciałbym mieć jedno menu w pliku base,html czyli takiego template (szablon) w którym będzie menu i stopka.

2. Zatem jak zaimplementować kod abym w szablonie mając jedno menu i odwołując się do niego zauważył na jakiej jestem stronie?

 

Z góry dziękuję za wszelką pomoc

 

1
komentarz 20 czerwca 2021 przez tangarr Mędrzec (154,780 p.)
Aby dowiedzieć się która strona jest aktualnie wyświetlana możesz użyć obiektu location i odczytać z niego pole pathname https://www.w3schools.com/jsref/prop_loc_pathname.asp
komentarz 21 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 21 czerwca 2021 przez VBService

Przykład dla location.pathname  wink

<!DOCTYPE html>
<html>
  <body>
    <button onclick="myFunction()">Pokaż</button>

    <pre id="show_pathname"></pre>

    <script>
      function myFunction() {
        const show = document.getElementById('show_pathname');
        
        show.textContent = location.href + '\n';
        show.textContent += 'location.pathname: ' + location.pathname + '\n';
  
        let x = location.pathname.split('/');
        show.textContent += x[x.length - 1] + '\n';
  
        x = x[x.length - 1].split('.');
        show.textContent += x[0] + '\n';
        show.textContent += x[1];
      }
    </script>
  </body>
</html>

 

0 głosów
odpowiedź 20 czerwca 2021 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];

const first = "First";
planet.sort(function(x,y){ return x === first ? -1 : y === first ? 1 : 0; });

console.log(planet);

 

komentarz 21 czerwca 2021 przez Wiciorny Ekspert (269,120 p.)
jak dobierane tu są wartości ? (x,y) w kolejnych krokach ?  Szczególnie dla pozostałych elementów gdy x === first. to przestawienie idzie x+1 y+1?.
0 głosów
odpowiedź 21 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 22 czerwca 2021 przez VBService

Nazwę strony możesz też pobierać z document.title, jak masz ustawione w kodzie html <title>

<!DOCTYPE html>
<html>
  <head>
    . . .
    <title>NAZWA STRONY</title>

    . . .
  </head>

  . . .
</html>

 

Moja propozycja na rotowanie danych

const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];

planet_name = 'First';
console.log('Wybrany: ' + planet_name, rotateArray(planet , planet_name));
planet_name = 'Contact';
console.log('Wybrany: ' + planet_name, rotateArray(planet , planet_name));

function rotateArray(arr, choice) {
    const from_index = arr.indexOf(choice);
    return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index)); 
}

 

Zestawienie podanych propozycji, wybór należy do Ciebie  wink

const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
console.info('Orginalna: ', planet);
 
/* kopie do testów */
let test1 = [...planet];
let test2 = [...planet];
let test3 = [...planet];
 
console.warn('Wersja: rotateArray_v1');
let planet_name = 'First';
console.log('Wybrany: ' + planet_name, rotateArray_v1(test1, planet_name));
planet_name = 'Contact';
console.log('Wybrany: ' + planet_name, rotateArray_v1(test1, planet_name));
 
console.warn('Wersja: rotateArray_v2');
planet_name = 'First';
test2 = rotateArray_v2(test2, planet_name);
console.log('Wybrany: ' + planet_name, test2);
planet_name = 'Contact';
test2 = rotateArray_v2(test2, planet_name);
console.log('Wybrany: ' + planet_name, test2);
 
console.warn('Wersja: rotateArray_v3');
planet_name = 'First';
test3 = rotateArray_v3(test3, planet_name);
console.log('Wybrany: ' + planet_name, test3);
planet_name = 'Contact';
test3 = rotateArray_v3(test3, planet_name);
console.log('Wybrany: ' + planet_name, test3);
 
function rotateArray_v1(arr, choice) {
  return arr.sort(function(x, y) { return x === choice ? -1 : y === choice ? 1 : 0; });
}
 
function rotateArray_v2(arr, choice) {
  while (arr[0] != choice) arr.push(arr.shift());
  return arr;
}
 
function rotateArray_v3(arr, choice) {
  const from_index = arr.indexOf(choice);
  return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index)); 
}

 

Demonstracja z użyciem document.title

<!DOCTYPE html>
<html>
  <head>
    <title>Contact</title>
  </head>
  <body>

    <div class="name_container">
      <p class="pn"></p>
      <p class="more">READ MORE</p>
    </div>

    <script>
      const planet = ["Start","Contact", "First","Second", "Third", "Fourth", "Fifth", "Sixth"];
      let planet_menu = [];

      /* symulacja odczytania <title> na potrzeby codepen-a */
      document.title = 'Contact';

      planet_menu = rotateArray(planet, document.title);
      document.querySelector('.pn').textContent = planet_menu[0];
      console.log(planet_menu);

      function rotateArray(arr, choice) {
        if (arr.indexOf(choice) > -1) { // lub if (arr.includes(choice))
          const from_index = arr.indexOf(choice);
          return [].concat(arr.slice(from_index, arr.length), arr.slice(0, from_index));
        }   
        return arr;
      }     
    </script>
  </body>
</html>

 

Podobne pytania

+1 głos
1 odpowiedź 94 wizyt
pytanie zadane 26 września 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)
0 głosów
2 odpowiedzi 136 wizyt
pytanie zadane 18 marca 2016 w JavaScript przez pobugiony Nowicjusz (120 p.)
0 głosów
1 odpowiedź 359 wizyt
pytanie zadane 27 lipca 2019 w HTML i CSS przez Jakub2111 Nowicjusz (180 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...