Autor Zpráva
janek007
Profil
Zdravím,
v js se vůbec neorientuji a jen vkládám a upravuji části kódů, které někde najdu, ale zrovna se mi nedaří rozchodit věc, že budu mít na stránce více buttonů a po jejich stisku se skryje určitá část pomocí toggle.
Když stisknu jakékoli tlačítko v proměnné mám stále jen hodnotu .detail_1, kde dělám chybu?

Také bych se chtěl zeptat, lze v php generovat části kódu už rovnou skryté? Zatím to řeším tak, že normálně pomocí php a html vygeneruju celou stránku a po načtení zavolám $(".detail_1").hide(); ale je problém, že nevím kolik těch detailů bude. Tak jestli se nechá nějak napsat funkce skryj vše co začíná "detail_*".

<script>
$(document).ready(function(){
    $(".detail_1").hide();
    $(".detail_2").hide();
    
    $("button").click(function(){
        var hodnotaTlacitka = $("button").val();
        $("." + hodnotaTlacitka).toggle();
        alert("." + hodnotaTlacitka);
    });
});
</script>


<button value="detail_1">1</button>
<button value="detail_2">2</button>
<button value="detail_3">3</button>
<button value="detail_4">4</button>

Děkuji za pomoc.
Kcko
Profil
janek007:
Dej si tomu nějakou třídu třeba hide-on-init
<button value="detail_1" class="hide-on-init">1</button>


a pak $('.hide-on-init').hide();

A jestli Ti to blbne tak z toho udělej živou ukázku a přidej na ní sem odkaz.
Radek9
Profil
janek007:
Funkce $ (předpokládám, že jde o jQuery, správně?) vybírá kolekci elementů. Pokud na ni potom (jako na 7. řádku) použiješ funkci typu val, která bere hodnotu z nějakého elementu, vezme se vždy z toho prvního. Pokud chceš brát hodnotu z konkrétního elementu, na který byla zavolána událost click, použij this:

var hodnotaTlacitka = $(this).val();

Nebo ještě lépe (protože je zbytečné vytvářet jQuery obal):

var hodnotaTlacitka = this.value;
janek007
Profil
Tak super. děkuju moc. S tím this to bylo přesně ono a už to funguje. Ano používám jquery.

A teď ještě poslední věc. Lze využít nějaké zástupné znaky. Java script volám na začátku programu a v té době ještě nevím kolik vygeneruju řádků v tabulce.
Lze nějak skrýt vše co by odpovídal masce. Například vše co má class začínající "detail_"?
Zatím to řeším tak, že si nad každým řádkem generuju i JS kód
<script>
  $(document).ready(function(){
      $(".detail_<?php echo $temp["id_header"]; ?>").hide();
  });
</script>

, ale to mi nepříde jako moc elegantní řešení. Když je js a html promíchané.
Radek9
Profil
janek007:
Buď jim můžeš přidat ještě jednu třídu, nebo je vybrat pomocí nějakého obecnějšího selektoru (to jsou řádky v tabulce?), nebo použít atributový selektor:

$("[class^=detail_]").hide();

Edit: Možná ještě lépe to udělat rovnou v CSS:
[class^=detail_] {
  display: none;
}
janek007
Profil
Ano jsou to řádky v tabulce. Vždy si nechávám jen první řádek a zbytek schovávám a zobrazím ho až po kliknutí.

class^=detail_ funguje výborně :))

Děkuji za pomoc. Ještě zdaleka nekončím, tak se určitě ještě ozvu :D
Radek9
Profil
janek007:
V tom případě je možná lepší něco takového:
#tabulka tbody tr {
  display: none;
}
#tabulka tbody tr:first-child {
  display: table-row;
}

Případně přes jeden selektor (ale nejsem si jistý podporou):
#tabulka tbody tr:nth-child(n+2) {
  display: none;
}

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: