NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
tbartolen
Člen
Avatar
tbartolen:4.1.2018 14:50

Ahoj,

Nejsem na js žádný přeborník, ale...

Hraju si s dropdowns, vypadá to asi nějak takhle

<div class="dropdown">
         <button onclick="myFunction()" class="dropbtn">Dropdown</button>
         <div id="myDropdown" class="dropdown-content">
             Lorem Ipsum
         </div>




         <button onclick="myFunction1()" class="dropbtn">Dropdown2</button>
         <div id="myDropdown1" class="dropdown-content">
             Lorem ipsum
         </div>
     </div>

js

    <script>
            function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
                    function myFunction1() {
    document.getElementById("myDropdown1").classList.toggle("show");
}

        </script>

css

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}


.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

Funguje to tak, jak bych chtěl, ale přijde mi nesmysl vytvářet pro každý button specialně funkci. Nejde to vymyslet nějak přes HTML DOM tak, aby se na onclick vždy vybrala ta daná kliknutá věc bez toho, aby to řešilo ID?

Editováno
Odpovědět
4.1.2018 14:50
Navštiv www.fb.com/skkelticz
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na tbartolen
Peter Sciranka:4.1.2018 15:15

Ahoj, toto by mohlo fungovať:

var buttons = document.getElementsByClassName("button");
for(var i = 0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){
        buttons[i].classList.toggle("show");
    })
}

S tým, že to máš celé v javascripte a nemáš funkciu v HTML.

Editováno
Nahoru Odpovědět
4.1.2018 15:15
Act as if it was Impossible to Fail
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na tbartolen
Peter Sciranka:4.1.2018 15:29

Teraz som si uvedomil, že som to zle napísal, ale princíp je podobný.

  • všetkým buttons priradíš spoločnú class a nejaký jedinečný atribut/id, tak aby si ho vedel v kóde získať.
  • následne každému button priradíš event, kde mu povieš, čo sa má stať po nejakej akcii, v tomto prípade kliknutí.
  • priradíš to tak, že nejak identifikuješ button a k jeho akcii priradíš konkrétny div a ten získaš tiež buď na základe id alebo data atributu.

Ak by ti to nešlo, tak napíš a ukážem ti to konkrétne na tvojom príklade :)

Editováno
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
4.1.2018 15:29
Act as if it was Impossible to Fail
Avatar
tbartolen
Člen
Avatar
Odpovídá na Peter Sciranka
tbartolen:4.1.2018 15:34

Díky, samozřejmě sem to mezitím celý přepsal, ale ten princip by měl fungovat i v jQuery, ne?

Uvědomil jsem si totiž, že nechci dropdown, ale colapsible div, takže jsem použil trošku jinou funkci

<div class="expandContent">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe" style="display:none">
        This content was hidden, but now shows up
</div>



        <div class="expandContent1">
        <a href="#">Click Here to Display More Content</a>
 </div>
<div class="showMe1" style="display:none">
        This content was hidden, but now shows up
</div>

<script>
    $('.expandContent').click(function(){
        $('.showMe').toggle();
    });


     $('.expandContent1').click(function(){
        $('.showMe1').toggle();
    });

</script>

Ale myslím, že ten způsob bude uplně stejný jako od tebe

Editováno
Nahoru Odpovědět
4.1.2018 15:34
Navštiv www.fb.com/skkelticz
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na tbartolen
Peter Sciranka:4.1.2018 15:39

Vieš čo, určite sa to bude dať aj v jQuery dosiahnuť a dosť možné, že aj kratším zápisom.

Ak by si chcel použiť jQuery len kvôli tomuto, tak to je dosť "overkill", ono celkovo podľa mňa je iná doba a tak ako jQuery niekedy bolo super, teraz už je vo veľa prípadoch zbytočné IMHO :)

Nahoru Odpovědět
4.1.2018 15:39
Act as if it was Impossible to Fail
Avatar
tbartolen
Člen
Avatar
Odpovídá na Peter Sciranka
tbartolen:4.1.2018 16:09

Něco takovýhleho?

<script language="javascript">
function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
        }
        else {
                ele.style.display = "block";
                text.innerHTML = "hide";
        }
}
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Ale moc tomu nerozumím...

  1. Mám proměnou "ele" , která je toggle text, tedy to, co nevidím.
  2. Zavolám funkci toggle přes href v HTML
  3. Pokud "ele" je zobrazena jako block (což nevím, protože to nikde nedefinuju, tak jak to mužu zjistovat), tak se změní na display="none" ....
  • tohle bych chápal jako zavírání, pokud je zobrazena, změní se na none, takže se mi schová

Takže určitě tak docela s tím uplně nesouhlasím a nerozumím :-/

Editováno
Nahoru Odpovědět
4.1.2018 16:09
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
tbartolen:4.1.2018 16:14

jo už to asi vidím, on má první zavírání protože if potřebuje reakci...a pak řeší otevírání, ale funkce je stejná

Nahoru Odpovědět
4.1.2018 16:14
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na Peter Sciranka
tbartolen:4.1.2018 16:22

jasný, mužu to i celé otočit a nic se neděje, zkusím do toho implementovat tu tvojí radu s vícero divy.

Mužu poprosit o sloučení příspěvků? Nemam prava na to :-/

Editováno
Nahoru Odpovědět
4.1.2018 16:22
Navštiv www.fb.com/skkelticz
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na tbartolen
Peter Sciranka:4.1.2018 16:34

Ahoj, tak som to teraz v rýchlosti napísal, ako by to šlo, je to jedna z možností:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dropdown example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button id="btn_1" class="btn">Button 1</button>
    <div id="drop_1" class="drop"></div>

    <button id="btn_2" class="btn">Button 2</button>
    <div id="drop_2" class="drop"></div>

    <script src="index.js"></script>
</body>
</html>

CSS (style.css)

.btn{
    display: block;
    margin-bottom: 5px;
}

.drop{
    height: 100px;
    background: coral;
    margin-bottom: 15px;
}

.displayNone{
    display: none;
}

JavaScript (index.js)

let buttons = document.getElementsByClassName("btn");
for(let i = 0; i<buttons.length; i++){
    buttons[i].addEventListener("click", function(){
        let div = document.getElementById("drop_"+(i+1));
        div.classList.toggle("displayNone");
    })
}

Mne to funguje bez problémov, tak sa na to pozri.

Poznámka:

  • javascript = ECMAScript6/2015
  • nie je použitá žiadna animácia, je to len na ukážku, ako by sa to dalo riešiť.
Nahoru Odpovědět
4.1.2018 16:34
Act as if it was Impossible to Fail
Avatar
tbartolen
Člen
Avatar
Odpovídá na Peter Sciranka
tbartolen:4.1.2018 20:23

Takže,

  1. vytvořím pole z všech classu BTN
  2. Pro i < než delka pole
  3. Přidám funkci která se spustí kliknutím na buttons ....t

Otázka - Jak zjistím, že klikám zrovna na ten button, na který klikám a má se otevřít zrovna ten daný drop_X

  1. let div je div s ID drop+ i+1, takže je vyšší, než buttons [i] o jednu? Tím padem by to nefungovalo, ne? Pokud bych kliknul na button 1, dostal bych do button[i] div o jednu větší....
  2. Změním div style na display none, takže to tím kliknutím vlastně zavřu, místo otevření....ale funguje to. Nevím proč.

Prosím o vysvětlení :(

Nahoru Odpovědět
4.1.2018 20:23
Navštiv www.fb.com/skkelticz
Avatar
tbartolen
Člen
Avatar
Odpovídá na tbartolen
tbartolen:4.1.2018 20:55

Přepsaný CSS tak, aby fungovalo otevíralo po načtení, místo zavírání:

.btn{
    display: block;
    margin-bottom: 5px;
}

.drop{
    display: none;
    height: 100px;
    background: coral;
    margin-bottom: 15px;
}

.displayNone{
    display: block;
}
Nahoru Odpovědět
4.1.2018 20:55
Navštiv www.fb.com/skkelticz
Avatar
Dominio
Člen
Avatar
Dominio:4.1.2018 22:03

Když už autor používá jQuery, tak jQuery. Nepřipadá mi zbytečné, záleží, jak moc z něj použiješ a jak moc ti usnadní práci. Napadá mě jednoduché řešení, mělo by snad fungovat.
Píšu z hlavy, snad bez chyb, ale principiálně by to mělo být správně.

$('.expandContent').on('click', function(){
       $(this).next().toggle()
   })

Pomocí $(this) získáš jQuery objekt toho elementu, který spustil funkci. Funkce next() vrací jQuery objekt následujícího elementu v DOM.

 
Nahoru Odpovědět
4.1.2018 22:03
Avatar
tbartolen
Člen
Avatar
Odpovídá na Dominio
tbartolen:4.1.2018 22:25

AHoj,

Děkuju, ale já už to mám komplet hotové v tom Javascriptu a předělavat to znovu nebudu, začínám to už stylovat...jen jsem trošku ztracený, viz ten muj dotaz výše. Jde o to, že sice nechci vymýšlet kolo, ale tomu, co od někud okopíruju, chci aspon rozumět

Editováno
Nahoru Odpovědět
4.1.2018 22:25
Navštiv www.fb.com/skkelticz
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá na Dominio
Peter Sciranka:4.1.2018 23:55

Ahoj, súhlasím s tým, že ak jQuery už používaš na danom projekte, tak prečo to nevyužiť, ale ak to je jediná vec, ktorú chceš dosiahnuť, tak zbytočne to tam ťahať.

Čo sa týka nejakého dlhodobejšieho výhľadu tak mi príde, že dnes je obrovský "hipe" ohľadom Javascriptu, pomaly týždenne vychádzajú nové frameworky, javascript už beží aj na backende (node.js + databáza napr. MongoDB), o frontende ani nehovorím (react, angular, vue, ionic, ember,...), dokonca sa už tvoria aj mobilné aplikácie v javascripte (napr. react native), to sú veci, ktoré pred pár rokmi boli nemysliteľné. Nedovolím si predpovedať, ako to bude za pár rokov, ale kto vie a práve preto IMHO je dobré sa naučiť ten javascript.

Nemám absolútne nič proti php ani iným akýmkoľvek jazykom, len chcem poukázať, že sila javascriptu rastie :)

PS: na začiatku vlákna je ten kód/problém/otázka v javascripte, jQuery sa objavilo až v priebehu :)

Nahoru Odpovědět
4.1.2018 23:55
Act as if it was Impossible to Fail
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.