Hilfe bei JQuery!

02/26/2016 14:45 qooc#1
Hallo,

ich möchte in JQuery wenn man auf ein select klickt das zB eine DIV Box mit der ID die man vom select bekommt angezeigt wird.

Das habe ich bisher hinbekommen nur möchte ich das die anderen wieder ausgeblendet werden wenn man zB Key 1 klickt kommt die div Box Key 1 ,
Div Box 2 und 3 sind ausgeblendet usw.

ich kann das sehr schlecht erklären deshalb vielleicht hilft euch der Code den ich gemacht habe:

jsfiddle: [Only registered and activated users can see links. Click Here To Register...]

PHP Code:
------- HTML BEREICH ------
 <
select id="kategorie" name="kategorie" class="form-control">
   <
option value="1">Test1</option>
   <
option value="2">Test2</option>
   <
option value="3">Test3</option>
</
select>


<
div id="1" style="display: none;"Test 1 wird angezeigt Test2 und Test3 sind nicht zusehen!</div>

<
div id="2" style="display: none;"Test 2 wird angezeigt Test1 und Test3 sind nicht zusehen! </div>

<
div id="3" style="display: none;"Test 3 wird angezeigt Test1 und Test2 sind nicht zusehen! </div>

---------- 
JQUERY BEREICH-------
$(function() {

  $(
'#kategorie').on('change', function(){
    var 
selected = $(this).find("option:selected").val();
    
//alert(selected);
    
$('#'+selected).show();
  });
  
}); 
Hoffe jemand kann mir hier helfen
02/26/2016 15:11 snow#2
#moved…
02/26/2016 17:50 Masterkroko1#3
Ich würde dein HTML schon anpassen

Pack an deine Divs eine Klasse "divShowSomething" und die Ids bildest du mit data Attributen ab "data-id=1"


Nun kannst du beim clicken deiner Optionen ein Event abfeuern und erstmal alle Divs mit der Klasse divShowSomething ausblenden und den einen wieder einblenden.

Bsp.:
HTML Code:
$(".divShowSomething").addClass("hidden").find("[data-id='" + deinSelectedValue + "']").removeClass("hidden");
02/26/2016 19:15 qooc#4
Quote:
Originally Posted by Masterkroko1 View Post
Ich würde dein HTML schon anpassen

Pack an deine Divs eine Klasse "divShowSomething" und die Ids bildest du mit data Attributen ab "data-id=1"


Nun kannst du beim clicken deiner Optionen ein Event abfeuern und erstmal alle Divs mit der Klasse divShowSomething ausblenden und den einen wieder einblenden.

Bsp.:
HTML Code:
$(".divShowSomething").addClass("hidden").find("[data-id='" + deinSelectedValue + "']").removeClass("hidden");

Hay,

ich kriege das irgendwie nicht hin.
Ich bin jetzt hier dran: [Only registered and activated users can see links. Click Here To Register...] und komme nicht mehr weiter ..

Gruß und danke dir für die bisherige Hilfe.
02/26/2016 20:00 Masterkroko1#5
Ach lol sorry.

Versuchs mit:
$(".divShowSomething").[Only registered and activated users can see links. Click Here To Register...]("hidden");
$(".divShowSomething[data-id='" + selected + "']").[Only registered and activated users can see links. Click Here To Register...]("hidden");

& du brauchst noch eine Eintrag im Css für hidden
.hidden {
display: none;
}

& die divs müssen von Anfang an die Klasse hidden bekommen

Ich hoffe ich hab den link richtig erstellt
[Only registered and activated users can see links. Click Here To Register...]
02/26/2016 20:08 qooc#6
Quote:
Originally Posted by Masterkroko1 View Post
Ach lol sorry.

Versuchs mit:
$(".divShowSomething").[Only registered and activated users can see links. Click Here To Register...]("hidden");
$(".divShowSomething[data-id='" + selected + "']").[Only registered and activated users can see links. Click Here To Register...]("hidden");

& du brauchst noch eine Eintrag im Css für hidden
.hidden {
display: none;
}

& die divs müssen von Anfang an die Klasse hidden bekommen

Ich hoffe ich hab den link richtig erstellt
[Only registered and activated users can see links. Click Here To Register...]

Danke funktioniert genau so wie ich es haben wollte!
02/26/2016 20:10 Hyukisawa#7
Ich würde da noch eine Default Option hinzufügen

Code:
<select id="kategorie" name="kategorie" class="form-control">
   <option value="0">Kategorie auswählen</option>
   <option value="1">Test1</option>
   <option value="2">Test2</option>
   <option value="3">Test3</option>
</select>
02/27/2016 02:49 False#8
Habe den Code noch etwas optimiert(meiner Meinung nach).Was ich mir angewöhnt habe ist, das wenn ich in einer Variable ein Jquer Object speicher das ich ein $ davor mache.
Dann sieht man beim nutzen der Variable sofort, ist es ein Object oder ein Wert.
Und noch ein paar Änderungen:
- on('change',function) zu change(function)
- addClass and removeClass zu hide and show (brauchst du keine class für zu erstellen)


Code:
$(function() {
    var $kategorie = $('#kategorie');
  $kategorie.change(updateDivs);
    
  function updateDivs(){
    var selected             = $(this).val();    
    var $divsToToggle = $(".divShowSomething");
    
        $divsToToggle.hide();
    $divsToToggle.filter("[data-id='" + selected + "']").show();
  }
});
Wenn das Div sofort angezeigt werden soll, also beim ersten Aufruf(Oder halt sofort anzeigen, jenachdem wie du das ganze verwendest) :
$kategorie.trigger('change');

€: Das heißt nicht das es perfekt ist, natürlich sind die Namen z.b. scheußlich :p
02/27/2016 16:46 Menan#9
[Only registered and activated users can see links. Click Here To Register...]
02/27/2016 19:41 Hyukisawa#10
Quote:
Originally Posted by .ƒaℓsє. View Post
Habe den Code noch etwas optimiert(meiner Meinung nach).Was ich mir angewöhnt habe ist, das wenn ich in einer Variable ein Jquer Object speicher das ich ein $ davor mache.
Dann sieht man beim nutzen der Variable sofort, ist es ein Object oder ein Wert.
Problem ist halt wenn man Frameworks benutz ala AngularJS wo $ für viele Sachen in Angular steht :D
02/27/2016 22:49 False#11
Quote:
Originally Posted by Hyukisawa View Post
Problem ist halt wenn man Frameworks benutz ala AngularJS wo $ für viele Sachen in Angular steht :D
Noch nie mit AngularJS gearbeitet, aber wenn ich var $ajaxResponse = ...... habe dann wird doch wohl ordentlich unterschieden oder nicht ? :D
02/28/2016 00:29 Hyukisawa#12
Quote:
Originally Posted by .ƒaℓsє. View Post
Noch nie mit AngularJS gearbeitet, aber wenn ich var $ajaxResponse = ...... habe dann wird doch wohl ordentlich unterschieden oder nicht ? :D
Klar :D
02/28/2016 00:52 False#13
Quote:
Originally Posted by Hyukisawa View Post
Klar :D
Dann sollte es ja kein Problem sein es weiter zu führen, natürlich bringt es ein bei Angular nichts mehr, weil man es dann auch nicht mehr weiß ob es ein Jquery Object ist oder nicht, jedoch ist die Frage was besser ist... es nicht zu wissen oder immer was anderes zu machen.
02/28/2016 01:03 Hyukisawa#14
Quote:
Originally Posted by .ƒaℓsє. View Post
Dann sollte es ja kein Problem sein es weiter zu führen, natürlich bringt es ein bei Angular nichts mehr, weil man es dann auch nicht mehr weiß ob es ein Jquery Object ist oder nicht, jedoch ist die Frage was besser ist... es nicht zu wissen oder immer was anderes zu machen.
Das ist jedem selbst überlassen :)
Wir sollten hier mal mit dem Thema aufhören...

Sorry für Offtopic.