Radio Button (gelöst) (HTML, CSS und Javascript)

[thread]19102[/thread]

Radio Button [gelöst]

Leser: 14

Articles: hide open all | hide show old branches

+19 replies

JuHa

2014-05-22 08:34

User since
2014-04-11
31 Artikel
BenutzerIn
[default_avatar]

Hallo,

kann mir einer Helfen wie ich mit Radio Buttons die Bilder wechsel in Openlayers 3?

Mein Code:

Code: (dl )

<div id="tree" class="span2">
                        <fieldset id="layerA">
                            <label class="radio" for="bild-switch_1">
                                <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1
                             </label>
                            <label class="radio" for="bild-switch_2">
                                <input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn()" />Bild2
                             </label>
                            <label class="radio" for="bild-switch_3">
                                <input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn()" />Bild3
                             </label>
                        </fieldset>
                </div>

Javascript:

Code: (dl )

function checkedRadioBtn(){

    var newL;
if(document.getElementById("bild-switch_1").checked){

        newL = new ol.layer.Image({
             source: new ol.source.ImageStatic({
                url: 'Bild1.png', 
                imageSize: [122, 44],
                projection: proj,
                imageExtent: proj.getExtent()
            })
        });
        
    }else if(document.getElementById("bild-switch_2").checked){

        newL = new ol.layer.Image({
             source: new ol.source.ImageStatic({
                url: 'Bild2.png', 
                imageSize: [722, 154],
                projection: proj,
                imageExtent: proj.getExtent()
            })
        });
     ...
 map.removeLayer(baseLayer);
     map.addLayer(newL);
};

Dies funktioniert bei mir, er switch die Bilder, aber mir ist aufgefallen, dass er nicht das vorherige Bild entfernt sondern er fügt einfach das Bild auf das vorherige oben drauf. Wie kriege ich das hin, dass dies nicht passiert?

Hier ein Link zu meinem kompletten Code.
http://jsfiddle.net/B9qkU/

Ich bedanke mich im Voraus!
Last edited: 2014-05-22 09:24:30 +0200 (CEST)

+18 replies
GwenDragon

2014-05-22 09:36
User since
2005-01-17
14784 Artikel
Admin1
So wie ich das versteh, musst du mit
Code: (dl )

map.getLayersByName(layerName)
erst ein Array aus Layers holen und dann mit
Code: (dl )

map.removeLayer(layer)
entfernen.

Könnte so gehen:
Code (javascript): (dl )

1 2 3

var allLayers = map.getLayersByName(layerName); // layerName = Name des gesuchten layers var layer = allLayers[0]; map.removeLayer(layer);
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
- +17 replies
- JuHa
  
  2014-05-22 09:50
  User since
  2014-04-11
  31 Artikel
  BenutzerIn
  Vielen Dank GwenDragon! :-D
  Dein Code:
  
  Code: (dl )
  
  1 2 3
  
  var allLayers = map.getLayersByName(layerName); // layerName = Name des gesuchten layers var layer = allLayers[0]; map.removeLayer(layer);
  
  ich habe dies umgesetzt und es klappt jetzt wunderbar. Jetzt wird nur ein Bild gesehen udn kein weiteres Bild wird überlappt.
  
  Code: (dl )
  
  1 2
  
  var allLayers = map.getLayers(baseLayer).getArray()[0]; map.removeLayer(allLayers);
  
  :-D
  
  Freue mich voll...habe daran 8 Stunden gesesen.
  - +16 replies
  - pq
    
    2014-05-22 10:09
    
    User since
    2003-08-04
    12208 Artikel
    Admin1
    
    bitte klick in zukunft selbst auf den grünen haken (thread als gelöst markieren), wenn ein thread für dich gelöst ist. danke.
    Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. -- Damian Conway in "Perl Best Practices"
    lesen: Wie frage ich & perlintro brian's Leitfaden für jedes Perl-Problem
    - +15 replies
    - JuHa
      
      2014-05-22 11:31
      
      User since
      2014-04-11
      31 Artikel
      BenutzerIn
      
      Ja, das mache ich. Nur habe ich ja noch eine Frage zum Thema...deshalb habe ich noch nicht den grünen Haken markiert :-)
      
      Meine Frage wäre noch dazu, wie man im Code oben sieht, habe ich jede Menge if-Bedingungen. Da ich 18 Bilder und über 200 Code habe, möchte ich dies irgendwie kürzen. Aber mir fällt nichts ein wie man dies erledigen kann. Freue mich auf weitere Hilfe!
      - Linuxer
        
        2014-05-22 11:35
        
        User since
        2006-01-27
        3891 Artikel
        HausmeisterIn
        
        Was sind "200 Code"?
        Meintest Du "200 Zeilen Code"? ;-)
        
        Zu "Verkürzung" des Codes.
        Könnte man nicht ein JSON-Objekt erzeugen, dass die Bild-Informationen enthält und dann mit einer Schleife die Bilder abarbeiten?
        meine Beiträge: I.d.R. alle Angaben ohne Gewähr und auf Linux abgestimmt!
        Die Sprache heisst Perl, nicht PERL. - Bitte Crossposts als solche kenntlich machen!
      - bianca
        
        2014-05-22 11:35
        
        User since
        2009-09-13
        7016 Artikel
        BenutzerIn
        
        Übergib doch alle Parameter wie z.B. die ID als Variable in die function.
        10 print "Hallo"
        20 goto 10
      - +12 replies
      - GwenDragon
        
        2014-05-22 11:48
        
        User since
        2005-01-17
        14784 Artikel
        Admin1
        
        Ungetestete Idee, Bilderdaten als Object in ein assoziatives Array.
        
        Als Zugriffschlüssel habe ich hier den Id der Checkbox genommen.
        
        Code (javascript): (dl )
        
        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
        
        /************ // Bild : { Objektdaten } "bild-2" : { url: 'Bild2.png', imageSize: [722, 154], projection: proj, imageExtent: proj.getExtent() } *************/ var bilder_switched = { "bild-switch_2" : { url: 'Bild2.png', imageSize: [722, 154], projection: proj, imageExtent: proj.getExtent() }, "bild-switch_1" : { url: 'Bild1.png', imageSize: [122, 44], projection: proj, imageExtent: proj.getExtent() } }; function switchChecked { for key in (bilder_switched) { if(document.getElementById(key).checked){ newL = new ol.layer.Image(bilder_switched[key]); map.removeLayer(baseLayer); map.addLayer(newL); } } }
        
        Last edited: 2014-05-22 11:57:26 +0200 (CEST)
        die Drachin Gwen
        
        Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
        
        +11 replies
        
        JuHa
        
        2014-05-22 12:17
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Danke für die Ratschläge.
        Ja, es sind 236 LOC ;-)
        
        @Linuxer: Das mit JSON-Objekt habe ich noch nie gearbeitet und muss ins JSON reinlesen.
        
        @bianca: Mit der ID wäre es auch möglich.
        
        Ich probiere zuers mal von GwenDragon (obwohl das auch fast soviel Code sein wird, wie davor. Vielleicht etwas verkürzt! Aber probiere es mal aus ;-) ) und von bianca den Vorschlag. Wenn die mir noch zu lang sind, dann probiere ich das mit JSON-Objekt. ;-)
        Last edited: 2014-05-22 12:18:36 +0200 (CEST)
        
        +10 replies
        
        bianca
        
        2014-05-22 12:23
        
        User since
        2009-09-13
        7016 Artikel
        BenutzerIn
        
        Was GwenDragon gezeigt hat beinhaltet eigentlich alle Vorschläge. JSON ist im Grunde auch nur eine Objekt Definition. Und das Iterieren von Linuxer ist dort auch drin in Form von for ... in ....
        10 print "Hallo"
        20 goto 10
        
        +9 replies
        
        JuHa
        
        2014-05-22 12:28
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Ok! Danke dir! ;-)
        
        +8 replies
        
        JuHa
        
        2014-05-22 14:55
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Wunderbar es klappt.
        
        Code: (dl )
        
        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
        
        var bilder_switched = { "bild-switch_2" : { url: 'Bild2.png', imageSize: [722, 154], projection: proj, imageExtent: proj.getExtent() }, "bild-switch_1" : { url: 'Bild1.png', imageSize: [122, 44], projection: proj, imageExtent: proj.getExtent() }, ...//weitere Bilder wurden eingefügt }; function checkedRadioBtn{ var allLayers = map.getLayers().getArray()[0]; map.removeLayer(allLayers); for key in (bilder_switched) { if(document.getElementById(key).checked){ newL = new ol.layer.Image({source: new ol.source.ImageStatic(bilder_switched[key])}); map.addLayer(newL); } } };
        
        Es werden alle Bilder ohne Überlappungen angezeigt. 236 LOC wurde auf 146 LOC reduziert. ;-D
        Last edited: 2014-05-22 15:10:36 +0200 (CEST)
        
        +7 replies
        
        GwenDragon
        
        2014-05-22 15:16
        
        User since
        2005-01-17
        14784 Artikel
        Admin1
        
        Da würde ich beim Radiobutton eine Funktion als Handler für den JS-Event onchange oder click (musst du testen) einfügen, wenn was selektiert wird.
        In der Funktion erzeugst du das neue Layer, änderst das Layer und ersetzt das alte.
        die Drachin Gwen
        
        Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
        
        +6 replies
        
        JuHa
        
        2014-05-22 15:56
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Wie meinst du mit der Funktion?
        In HTML habe ich doch dies:
        
        Code: (dl )
        
        1 2 3
        
        <label class="radio" for="bild-switch_1"> <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1 </label>
        
        Die onchange = "checkRadioBtn()" rufe ich mit der Funktion auf:
        
        Code: (dl )
        
        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
        
        function checkedRadioBtn(){ for(var key in bilder_switched) { if(document.getElementById(key).checked){ newL = new ol.layer.Image({source: new ol.source.ImageStatic(bilder_switched[key])}); //remove image from map map.removeLayer(baseLayer); //get layers and remove marker var allLayers = map.getLayers().getArray()[0]; map.removeLayer(allLayers); for(var i = 0; i<icons.length; i++){ map.removeLayer(icons[i]); } map.addLayer(newL); } } };
        
        Hier rufe ich doch die Funktion auf die ich selektiert habe. Oder was genau meinst du?
        Last edited: 2014-05-22 15:58:11 +0200 (CEST)
        
        +5 replies
        
        GwenDragon
        
        2014-05-22 16:09
        
        User since
        2005-01-17
        14784 Artikel
        Admin1
        
        Genau, das ist der Event-Handler für den Radiobutton.
        Da musst du eben die Änderungen für deinen zu ändernden Layer machen.
        die Drachin Gwen
        
        Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
        
        +4 replies
        
        JuHa
        
        2014-05-23 13:59
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Erst mal vielen Dank für eure Hilfe!
        
        Habe eine andere Lösung dazu grob mitgeteilt bekommen und habe dies versucht zu realisieren. Code ist noch kürzer
        Hier mein Lösungsansatz:
        
        Code: (dl )
        
        1 2 3
        
        <label class="radio"> <input class="bild-switch_1a" type="radio" name="bilder" value="Bild1" data-image="Bild1.png" onchange="RadioButton('Bild1.png', [733, 152])" checked/>Bild 1 </label>...
        
        JS:
        
        Code: (dl )
        
        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
        
        function RadioButton(url, size){ newL = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: url, imageSize: size, projection: proj, imageExtent: proj.getExtent() }) }); map.removeLayer(layer); var allLayers = map.getLayers().getArray()[0]; map.removeLayer(allLayers); for(var i = 0; i<icons.length; i++){ map.removeLayer(icons[i]); } map.addLayer(newL); map.updateSize(); };
        
        Es klappt! ;-) Was hält ihr zu dieser Lösung? Ich muss dann nur bei html einmal ein Bild einfügen oder die Größe, sowie url ändern.
        Last edited: 2014-05-23 14:00:56 +0200 (CEST)
        
        +3 replies
        
        GwenDragon
        
        2014-05-23 14:05
        
        User since
        2005-01-17
        14784 Artikel
        Admin1
        
        Ja, ist eine passable Lösung.
        Wie es der bekannte Perl-Guru Tim Towdy aka TIMTOWDY sagte: Viele Wege führen zu einer Lösung.
        die Drachin Gwen
        
        Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
        
        +2 replies
        
        JuHa
        
        2014-05-23 14:18
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Ja das stimmt ;-)
        
        So jetzt ist mein Radio Button erledigt. Na klar habe ich noch weitere Probleme die aufgetretten sind... aber die werde ich mal alleien lösen, bevor ich wieder ein Thread eröffne. ;-)
        
        Nochmals vielen Dank an allen, die mir geholfen haben auch wenn ich eine andere Lösung jetzt laufen habe ;-)
        
        lg
        JuHa
        
        JuHa
        
        2014-05-26 15:10
        
        User since
        2014-04-11
        31 Artikel
        BenutzerIn
        
        Zu den Radio Button ist noch ein Problem aufgetreten ;-( Leider finde ich den Fehler nicht!
        
        function checkedRadioBtn(){...};
        function checkMeassure(){...};
        Den code habe ich hier: http://jsfiddle.net/B9qkU/7/
        
        Mein Problem ist, dass wenn ich ein Radio button aktiviere und dann zeichnen will und danach ein anderes Radio button aktiviere, dann wird die Zeichnung im Hintergrund gesehen und die Bilder überlappen sich. Leider finde ich den Fehler nicht und würde mich freuen, wenn ihr mir dabei weiterhelfen könnt.
        
        lg

View all threads created 2014-05-22 08:34.