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

Kilkukrotne wywoływanie funkcji w JS

VPS Starter Arubacloud
0 głosów
287 wizyt
pytanie zadane 16 lutego 2018 w JavaScript przez Scypyon Gaduła (3,450 p.)
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <title>Portfolio - Wojciech Michałowski</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700' rel='stylesheet' type='text/css'>
  <link href='css/main.css' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width">
  <script src="js/mousehover.js" type="text/javascript"></script>
</head>
<body>
<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-html.png" title="Logo HTML"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full();"><span class="skills-loading-html"></span></div>
		</div>
	</div>
	<div style="clear:both;"></div>
	<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-html.png" title="Logo HTML"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full();"><span class="skills-loading-css"></span></div>
		</div>
	</div>
</body>
</html>
.meter {
  position: relative;
  margin-top: 35px;
  width: 198px;
  height: 26px;
  border: 1px solid #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.meter .skills-loading-html {
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-html:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(208, 119, 31, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-html::before,
.meter.full .skills-loading-html:before {
  width: 70%;
}

.meter .skills-loading-css {
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-css:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(218, 189, 51, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-css::before,
.meter.full .skills-loading-css:before {
  width: 60%;
}
function full() {
  var element = document.getElementById("meter");
    element.classList.add("full");
}

Pytanie brzmi: Dlaczego funkcja wywołuje się tylko na jednym divie? A nie na każdym z osobna ? I jak to osiągnąć?

1 odpowiedź

+1 głos
odpowiedź 16 lutego 2018 przez marioosu Dyskutant (9,260 p.)
wybrane 17 lutego 2018 przez Scypyon
 
Najlepsza
Identyfikator powinien być unikatowy, w tym przypadku powinieneś odwoływać się do klasy. Jeśli dobrze się domyślam, co chcesz osiągnąć, to nawet do this

Zajrzyj do https://forum.pasja-informatyki.pl/109776/html-class-czy-

 

W kodzie html zmień na  onmouseover="full(this);"

// przez this przekazuj aktualny obiekt

a JSy niech wyglądają tak (już o addEventListener nie wspomnę, bo rozumiem, że to początki)

function full(ob) {
          ob.classList.add("full");
}
komentarz 16 lutego 2018 przez Scypyon Gaduła (3,450 p.)
zmieniłem tak jak mówisz i nie działa + nie do końca rozumiem co mam z JS zrobić.

Pierwszy obiekt powinien mieć onmouseover="full();" a kolejne dodane w nawiasach this, tak? czy odrazu wszystkie z (this)
komentarz 16 lutego 2018 przez Scypyon Gaduła (3,450 p.)
mógłbyś mi wrzucić całość? Przeanalizowałbym sobie
komentarz 16 lutego 2018 przez marioosu Dyskutant (9,260 p.)
<body>
<div class="skills-content-container">
        <div class="skills-content-logo">
            <img src="img/logo-html.png" title="Logo HTML"></img>
        </div>
        <div class="skills-content-loading">
            <div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-html"></span></div>
        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="skills-content-container">
        <div class="skills-content-logo">
            <img src="img/logo-html.png" title="Logo HTML"></img>
        </div>
        <div class="skills-content-loading">
            <div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-css"></span></div>
        </div>
    </div>
    <script>
      function full(ob) {
          ob.classList.add("full");
      }
    </script>
</body>

 

komentarz 16 lutego 2018 przez Scypyon Gaduła (3,450 p.)

Działa, jednak nie do końca wiem na jakiej zasadzie, 

<script>
      function full(ob) {
          ob.classList.add("full");
      }
    </script>

o ten script mi chodzi, bo łączy się on z tym moim, dodaje on class "full"?

 

komentarz 16 lutego 2018 przez marioosu Dyskutant (9,260 p.)
w onmouseover przekazujesz dla full() argument this - czyli aktualny obiekt. następnie w deklaracji funkcji full ustawiłem jego nazwę na "ob" i to jest ten "this" z kodu html. Następnie dodajesz mu klasę full.

naucz się dokładniej html'a (chociażby te identyfikatory), później więcej podstaw JS i korzystania z google, chociażby "czym jest this w javascript" :)

Na tworzenie portfolio przyjdzie jeszcze czas.
1
komentarz 16 lutego 2018 przez Scypyon Gaduła (3,450 p.)
I got this :> Dzięki bardzo.Z html i css jest u mnie wporządku(w miarę) , to właśnie js u mnie leży :/   Miałbyś może jakiś fajny tutorial pod ręką(z js)? Zelent na tym etapie już nie wystarcza :/
1
komentarz 17 lutego 2018 przez marioosu Dyskutant (9,260 p.)
To super, że już działa :)

JSa uczyłem się dawno temu, ale myślę, że ten będzie spoko jak na razie http://kursjs.pl/  oraz ten http://shebang.pl/kursy/wszystko-jasne/

Powodzenia!
komentarz 17 lutego 2018 przez Scypyon Gaduła (3,450 p.)
Dzięki jeszcze raz :)

Podobne pytania

0 głosów
1 odpowiedź 360 wizyt
pytanie zadane 1 września 2022 w JavaScript przez polandonion Mądrala (6,970 p.)
0 głosów
1 odpowiedź 419 wizyt
pytanie zadane 22 czerwca 2020 w JavaScript przez Bartek12 Mądrala (5,510 p.)
0 głosów
1 odpowiedź 642 wizyt
pytanie zadane 22 sierpnia 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 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!

...