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

question-closed JQuery -> Vanilla JS

Object Storage Arubacloud
0 głosów
331 wizyt
pytanie zadane 25 września 2022 w JavaScript przez Pawel82 Użytkownik (740 p.)
zamknięte 26 września 2022 przez Pawel82

Witam chciałem przetłumaczyc kod  z JQuery na Vanilla JS  kod ma za zadanie zmieniać pliki css, ale nie wiem jak

 zapisac  $("head link#theme").attr("href", $(this).data("theme")); mogę prosić o pomoc

$("button[data-theme]").click(function(){
        $("head link#theme").attr("href", $(this).data("theme"));
    });
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css" id="theme">
	<title>Theme css</title>
</head>
<body>
	<button data-theme="css/red.css">Red</button>
	<button data-theme="css/blue.css">Blue</button>

	<script>
		const btn = document.querySelectorAll('button[data-theme]');

		btn.forEach(btns => {
			btns.addEventListener('click', () => {
				
			});
		});
	</script>
</body>
</html>

 

komentarz zamknięcia: Znaleziono rozwiązanie

3 odpowiedzi

+3 głosów
odpowiedź 25 września 2022 przez radek024 Szeryf (77,160 p.)
$("button[data-theme]").click(function(){
        $("head link#theme").attr("href", $(this).data("theme"));
    });

Przeanalizujmy sobie kod jQuery, ten który posiadasz:

  1. Wybierz button posiadający atrybut data-theme
  2. Dodaj nasłuchanie - po kliknięciu uruchom funkcję
  3. Znajdź znacznik link w head i nadaj nową wartość dla atrybutu href.

To w sumie tyle. Na chwilę obecną Twój kod wyłapuje wszystkie znaczniki button, a następnie dla każdego z tych buttonów (tak myślę - w kodzie masz literówkę) dodajesz nasłuchiwanie na kliknięcie, które to z kolei wywołuje pustą funkcję. 

W czym masz problem? Jeżeli potrafisz wybrać element oraz nasłuchiwać, to teraz pozostaje złapanie odpowiedniego link, a następnie zmiana wartości.

komentarz 25 września 2022 przez Pawel82 Użytkownik (740 p.)
Mam problem ze złapaniem i zmianą wartości  w linku
komentarz 25 września 2022 przez radek024 Szeryf (77,160 p.)

Możesz użyć console.log() do sprawdzania w konosli (F12, ew. Zbadaj element - po prawym przycisku myszy, następnie Konsola) czy udało się złapać element. Metodę do użycia masz taką samą, chociaż wygodniej będzie querySelector zamiast querySelectorAll.

+1 głos
odpowiedź 25 września 2022 przez pablop76 VIP (123,180 p.)

Potrzebujesz getAttributesetAttribute do pobrania i  ustawienia atrybutu i Event/target zamiast $(this) lub zmień funkcję strzałkową na zwykła i wtedy zostaw this. W head link masz id więc możesz pobrać go za pomocą getElementById

0 głosów
odpowiedź 26 września 2022 przez VBService Ekspert (254,880 p.)
edycja 26 września 2022 przez VBService

W Twoim kodzie

btn.forEach(btns => {

używasz btns to jest odpowiednik (w pewnym uproszczeniu) $(this) (w oryginalnym zapisie Twojego kodu w jquery), więc możesz "zostawić" zapisany przez Ciebie do tej pory kod js. Zapis .data("theme")) to jest w js-ie dataset.theme, js dopuszcza, jeżeli jakiś atrybut już znajduje się w kodzie html bezpośrednie odwołanie się do niego (w tym przypadku href).

<link rel="stylesheet" href="css/style.css" id="theme">

do "złapania" elementu link, możesz skorzystać z porady @pablop76

W head link masz id więc możesz pobrać go za pomocą getElementById

 

czyli np.

        const buttons = document.querySelectorAll('button[data-theme]');
 
        buttons.forEach(button => {
            button.addEventListener('click', _=> {
                const link = document.getElementById('theme');
                link.href = button.dataset.theme;   
            });
        });

 

komentarz 26 września 2022 przez ScriptyChris Mędrzec (190,190 p.)

js dopuszcza, jeżeli jakiś atrybut już znajduje się w kodzie html bezpośrednie odwołanie się do niego

Za mapowanie atrybutów do propertisów odpowiada DOM, a nie JS.

https://javascript.info/dom-attributes-and-properties

komentarz 26 września 2022 przez VBService Ekspert (254,880 p.)

Może zbyt potocznym językiem to ująłem, wiadomo (miałem na myśli), że np. w tym przypadku gdy użyjemy

 document.getElementById(...)

to zwrócona wartość jest obiektem opisującym obiekt elementu DOM pasujący do podanego identyfikatora.

 

BTW, odwoływanie się do kilku przykładowych atrybutów standardowych.

<style>
  img {
    width: 10em;
    height: 10em;
    border: 5px solid red;
  }
</style>

<img>
<pre></pre>

<script>
  const img = document.querySelector('img'),
        pre = document.querySelector('pre');

  async function demo() {
    attributes(); await sleep(2);
    img.src='';
    attributes(); await sleep(2);
    img.alt='img';
    attributes(); await sleep(2);
    img.title='title';
    attributes(); await sleep(2);
    img.style='rotate: 180deg; border-color: orange';
    attributes();
  }

  demo();

  function attributes() {
    console.log(img.attributes, img.attributes.length);
    pre.textContent += img.attributes + ' ' + img.attributes.length + '\n';
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms * 1000));
  }
</script>

 

1
komentarz 26 września 2022 przez Pawel82 Użytkownik (740 p.)

Dziękuje, super wytłumaczone smiley

Podobne pytania

0 głosów
3 odpowiedzi 3,802 wizyt
pytanie zadane 25 listopada 2017 w JavaScript przez sapero Gaduła (4,100 p.)
0 głosów
1 odpowiedź 613 wizyt
pytanie zadane 23 maja 2018 w JavaScript przez Łucja Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 272 wizyt
pytanie zadane 17 września 2022 w JavaScript przez kordix Gaduła (3,870 p.)

92,757 zapytań

141,679 odpowiedzi

320,437 komentarzy

62,101 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!

...