adam: jQuery, Elemente ausgeblendet erst nach dem zweitem Klicks

SELF-Forum

jQuery, Elemente ausgeblendet erst nach dem zweitem Klicks

adam
– Informationen zu den Bewertungsregeln

Hallo,

für meine Anwendung verwende ich jQuery 1.2.6 um bestimmte Elemente aus bzw. ein zu schalten.
Also, ich habe fünf Radiobuttons, beim landen der Seite ist der erste über angewählt.
Klickt der User auf den zweiten Radiobutton soll das Bild ausgeblendet werden und unten eine Tabelle angezeigt werden. Klickt der User auf den dritten, vierten oder den fünften Radiobuttons, soll das Bild und die Tabelle falls schon eingeblendet, ausgeblendet werden.
An diese Stelle beginnt mein Problem.
Klick der User auf Button Nr. 3 oder 4 oder 5 wird die Tabelle beim erstem Klick nicht ausgeblendet, sie verschwindet erst, beim zweitem Klick auf den glichen Radiobutton oder auf eine andere Button, dh. Nr. 4 oder 5.
Hat jemand eine Idee woran das liegen kann?

Grüße
adam

Code:

  
<html>  
<?php  
$strZahl="<table border=1><tbody>        <tr>            <td><input value='aja' name='aja' type='checkbox' /> </td>            <td rowspan='2' width='735'>        <p><span style='font-size: 9pt'><b>Ja</b></span>, Text text</span></p>        <p>Text text</p>            </td>        </tr>        <tr>            <td>&nbsp;</td>        </tr>        <tr>            <td><input value='s_ja' name='s_ja' type='checkbox' /> </td>            <td rowspan='2'>Ich bin Text Text            </td>        </tr>        <tr>            <td>&nbsp;</td>        </tr>        <tr>            <td>&nbsp; </td>        </tr>    </tbody></table>Text Text";  
$strZahl = preg_replace("/\cM\n\t/", "", $strZahl);  
?>  
<head>  
  <script src="jquery-1.2.6.min.js"></script>  
       <script>  
  $(document).ready(function(){  
  
    $("#r11").click(function () {  
        if ( isNaN(document.getElementById("myNummer")) == false) {  
            $("#kid1").append("<div name=\"myNummer\" id=\"myNummer\"><img src=\"bild.jpg\" width=\"200\" border=\"0\" alt=\"myNummer\"></div>");  
        }  
        if ( isNaN(document.getElementById("neueZahl")) == true) {  
            $("#neueZahl").remove();  
        }  
    });  
    $("#r12").click(function () {  
          $("#myNummer").remove();  
          $("#alteZahl").append("<div id=\"neueZahl\"><?php echo $strZahl; ?></div>");  
    });  
    $("#r13").click(function () {  
    // Funktioniert leider nicht, leider auch nicht, zweiter Entwurf.  
        $("#neueZahl").remove();  
        $("#myNummer").remove();  
/*  
        // Funktioniert leider nicht, erster Entwurf  
        if ( document.getElementById("neueZahl").getAttribute.length == 1 ) {  
            $("#neueZahl").remove();  
        }  
        if ( isNaN(document.getElementById("myNummer")) == true) {  
            $("#myNummer").remove();  
        }  
//        */  
    });  
    $("#r14").click(function () {  
        if ( isNaN(document.getElementById("neueZahl")) == true) {  
            $("#neueZahl").remove();  
        }  
        if ( isNaN(document.getElementById("myNummer")) == true) {  
            $("#myNummer").remove();  
        }  
    });  
    $("#r15").click(function () {  
        if ( isNaN(document.getElementById("neueZahl")) == true) {  
            $("#neueZahl").remove();  
        }  
        if ( isNaN(document.getElementById("myNummer")) == true) {  
            $("#myNummer").remove();  
        }  
    });  
  });  
  </script>  
 </head>  
 <body>  
<input type="radio" name="r1" value="1" id="r11" checked />Neu hier<br>  
<input type="radio" name="r1" value="1" id="r12" />Wahl 2<br>  
<input type="radio" name="r1" value="1" id="r13" />Wahl 3<br>  
<input type="radio" name="r1" value="1" id="r14" />Wahl 4<br>  
<input type="radio" name="r1" value="1" id="r15" />testen<br>  
  
 <form action="#" name="form1">  
     <div name="kid1" id="kid1">  
         <div name="myNummer" id="myNummer">  
            <img src="bild.jpg" width="200" border="0" alt="myNummer" >  
        </div>  
    </div>  
    <br>  
    <div id="alteZahl">  
        <div id="neueZahl"></div>  
    </div>  
 </form>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. jQuery, Elemente ausgeblendet erst nach dem zweitem Klicks

    Florian
    – Informationen zu den Bewertungsregeln

    Hallo adam.
    Du schreibst, du möchtest Elemente ein bzw. ausbleden. In deinem Coding benutzt du aber append und remove. Wie siehts denn aus wenn du show und hide verwendest? Ist dann das Verhalten das gleiche? Und ist es in verschiedenen Browsern das gleiche?
    Ich vermute hier mal ein Problem mit dem DOM, bin mir aber nicht sicher.
    Probier mal show und hide und poste deine Erfahrungen, dann seh ich weiter.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. jQuery, Elemente ausgeblendet erst nach dem zweitem Klicks

      adam
      – Informationen zu den Bewertungsregeln

      Hallo Florian,

      ja, stimmt, ich habe geschrieben, dass ich sie ausblenden möchte, in erste Linie wollt ich diese Elemente einfach weg haben, letzt endliche habe ich die Funktion "hide" und "show" verwendet, es sieht so aus:

        
$("#r11").click(function () {  
 $("#myNummer").show("slow");  
 $("#neueZahl").hide("slow");  
});  
...  
$("#r14").click(function () {  
 $("#myNummer").hide("slow");  
 $("#neueZahl").hide("slow");  
});

      Danke für Deine Mühe.

      Grüße
      adam

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln