Ich kann nicht verstehen, warum meine Funktion nicht ausgelöst wird. Vielleicht irre ich mich mit dem Selektor?

HTML:

<html>
{% include head.html %}
    <body id="general">

            <header>

                {% include navbar.html %}

                <script>
                $('input[name=optradio])'.click(function () {
                    if (this.id == "showdiv") {
                        $("#onsaanbod").show('slow');
                    } else {
                        $("#onsaanbod").hide('slow');
                    }
                }); 
                </script>

            </header>

            <div class="container-fluid">

                <!-- contenttop -->
                <div class="row"  style="padding-top: 3%; padding-bottom: 3%;" >
                    {% include /getaquote/contenttop-getaquote.html %}
                </div>

                <div class="col-md-12 col-lg-10 col-lg-offset-2">
    <div class="row">
        <div class="col-md-12">
            <p> content </p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <hr>
        </div>
    </div>

    <!-- start-form -->
    <!-- Volume -->
    <div class="row">
        <div class="col-md-6">
            <p> content </p>

        </div>

        <div class="col-md-6">
            <div class="controls">
                <form id='form-id'>
                <div class="radio">
                    <label><input type="radio" name="optradio">Meer dan 1000 per jaar</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">Tussen 500 en 1000 per jaar</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" id="showdiv">Minder dan 500 per jaar</label>
                </div>
                </form>
            </div>

        </div>

    </div>

    <div class="row" id="onsaanbod" style='display:none'>
        <div class="col-md-12">
            <h1 class="titlel1"> content </h1>
            <p> content </p>
        </div>
    </div>


</div>

Ich möchte das zweite Div anzeigen, wenn der Benutzer auf das dritte Optionsfeld klickt. Ich habe versucht, die Position des Skripts zu ändern, aber ich glaube nicht, dass dies das Problem ist. Ich bin sicher, dass es ein triviales Problem ist. Es funktioniert nicht!

        <!-- footer -->
        {% include footer.html %}

        </div>
</body>
0
Silvio S. 13 Aug. 2015 im 10:22

5 Antworten

Beste Antwort

Sie müssen Ihren Code einpacken

$(document).ready(function(){
 //Code
});

Dadurch wird sichergestellt, dass das Skript nach dem Laden der Seite ausgelöst wird und somit über die zu verwendenden Ressourcen verfügt. In Ihrem Fall würde Ihr Code folgendermaßen aussehen:

$(document).ready(function(){
  $('input[name=optradio]').click(function () {
    if (this.id == "showdiv") {
      $("#onsaanbod").show('slow');
    } else {
      $("#onsaanbod").hide('slow');
    }
  }); 
}); 
2
Patrick2607 13 Aug. 2015 im 07:24

Es gibt einen Tippfehler:

$('input[name=optradio])'.click
$('input[name=optradio]').click

und

Sie sollten Ihr js am unteren Rand des Körpers verschieben oder es in eine $ (document) .ready () -Methode einschließen

$(document).ready(function(){
    $('input[name=optradio]').click(function () {
        if (this.id == "showdiv") {
            $("#onsaanbod").show('slow');
        } else {
            $("#onsaanbod").hide('slow');
        }
    }); 
});

Es soll sicherstellen, dass das Element vorhanden ist, wenn Sie den click Listener darauf anwenden

3
MazzCris 13 Aug. 2015 im 07:36

Wenn Sie bereits einen Ausweis haben, können Sie ihn aus erster Hand verwenden.

Stellen Sie sicher, dass Sie über die 1.7+ Version von jquery verfügen, um prop zu verwenden.

     <script>
        $(document).ready(function()
        {
            $('#showdiv').click(function()
            {
              if($(this).prop("checked"))
              {
                $("#onsaanbod").show('slow');
              }
              else
              {
                $("#onsaanbod").hide('slow');
              }
             });
        }); 
     </script>
0
Saswat 13 Aug. 2015 im 07:35

Wickeln Sie den gesamten Code ein:

$(document).ready(function(){
  // Here..
});

Dies wird erst ausgeführt, nachdem alle DOM-Elemente geladen wurden.

0
Praveen Kumar Purushothaman 13 Aug. 2015 im 07:26

Sie müssen Ihren Code einpacken in:

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Es gibt einige Hinweise.

0
Todd Mark 13 Aug. 2015 im 07:25