Avatar billede thomasfricke Juniormester
06. september 2018 - 02:26 Der er 9 kommentarer og
1 løsning

onClick (Ændre css på div, der er efter onClick)


<div id="btn" onclick="showText();">Klik her</div>
<div id="infoText" style="display: none;">Besked vises</div>

<script>
function showText(){
  ******
}
</script>


### Function showText() ###
Hvordan for jeg function til at ændre style på id="infoText" til display: block; ???

--- Noget i stil med $("#btn").div.after.change.css (display : block;) ---
Avatar billede Rune1983 Ekspert
06. september 2018 - 07:28 #1
<script>
function showText()
{
    document.getElementById("infoText").style.display = "block";
}
</script>
Avatar billede Slater Ekspert
06. september 2018 - 07:57 #2
Eller når du alligevel åbenbart bruger jQuery:

$('#btn').click(function() {
  $('#infoText').show();
});
Avatar billede thomasfricke Juniormester
06. september 2018 - 09:28 #3
Vil det ikke ændre ALLE der hedder #infoText ???
Avatar billede Rune1983 Ekspert
06. september 2018 - 09:33 #4
Det er vist ikke så godt at have flere med samme id.
Så skal de adskilles fra hinanden.
Fx.
<script>
function showText(x)
{
    document.getElementById(x).style.display = "block";
}
</script>
<div id="btn" onclick="showText('infoText01');">Klik her</div>
<div id="infoText01" style="display: none;">Besked vises</div>
<div id="btn" onclick="showText('infoText02');">Klik her</div>
<div id="infoText02" style="display: none;">Besked vises</div>
<div id="btn" onclick="showText('infoText03');">Klik her</div>
<div id="infoText03" style="display: none;">Besked vises</div>
Avatar billede thomasfricke Juniormester
06. september 2018 - 09:47 #5
derfor jeg søgte noget i stil med " .div.after "
Avatar billede Rune1983 Ekspert
06. september 2018 - 12:55 #6
Prøv lige dette eksempel af og se om det ikke kan tilpasset dit kode.

<div style="width: 100%;">
            <style>
                .hidden>div {
                    display:none;
                }
               
                .visible>div {
                    display:block;
                }
            </style>
            <div style="width: 100%;" class="text_container">
                <h3>Nummer 1</h3>
                <div><!--div that we want to hide-->
                    <p>Nummer 1 tekst</p>
                </div>
            </div>
            <div style="width: 100%;" class="text_container">
                <h3>Nummer 2</h3>
                <div><!--div that we want to hide-->
                    <p>Nummer 2 tekst</p>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $('.text_container').addClass("hidden");
           
                    $('.text_container').click(function() {
                        var $this = $(this);
           
                        if ($this.hasClass("hidden")) {
                            $(this).removeClass("hidden").addClass("visible");
           
                        } else {
                            $(this).removeClass("visible").addClass("hidden");
                        }
                    });
                });
            </script>
        </div>
Avatar billede Slater Ekspert
06. september 2018 - 13:16 #7
Eller nemmere med jQuery:

<div class="btn" onclick="showText();">Klik her</div>
<div class="infoText" style="display: none;">Besked vises</div>

$('.btn').click(function() {
  $(this).find('+ .infoText').toggle();
});
Avatar billede Slater Ekspert
06. september 2018 - 13:17 #8
Hov, onclick skal bare fjernes.
Avatar billede Rune1983 Ekspert
06. september 2018 - 14:25 #9
For at mit eksempel ovenfor virker skal følgende være i header
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
Avatar billede thomasfricke Juniormester
08. september 2018 - 08:45 #10
Det blev Rune's med forskellige id...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester