Diskuze: Více než jeden dropdown v jedné funkci?

tbartolen

Člen

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 4.1.2018 14:52

Odpovědět

4.1.2018 14:50

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

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 4.1.2018 15:16

Nahoru Odpovědět

4.1.2018 15:15

Act as if it was Impossible to Fail

Peter Sciranka

Tvůrce

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 4.1.2018 15:29

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

4.1.2018 15:29

Act as if it was Impossible to Fail

tbartolen

Člen

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 4.1.2018 15:35

Nahoru Odpovědět

4.1.2018 15:34

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

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

tbartolen

Člen

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

Mám proměnou "ele" , která je toggle text, tedy to, co nevidím.
Zavolám funkci toggle přes href v HTML
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 4.1.2018 16:11

Nahoru Odpovědět

4.1.2018 16:09

Navštiv www.fb.com/skkelticz

tbartolen

Člen

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

tbartolen

Člen

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 4.1.2018 16:23

Nahoru Odpovědět

4.1.2018 16:22

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

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

tbartolen

Člen

tbartolen:4.1.2018 20:23

Takže,

vytvořím pole z všech classu BTN
Pro i < než delka pole
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

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ší....
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

tbartolen

Člen

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

Dominio

Člen

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

tbartolen

Člen

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 4.1.2018 22:25

Nahoru Odpovědět

4.1.2018 22:25

Navštiv www.fb.com/skkelticz

Peter Sciranka

Tvůrce

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

Nejčastěji vyhledáváné

Diskuze: Více než jeden dropdown v jedné funkci?