Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > Web Development
You last visited: Today at 19:07

  • Please register to post and access all features, it's quick, easy and FREE!

Advertisement



Hilfe bei JQuery!

Discussion on Hilfe bei JQuery! within the Web Development forum part of the Coders Den category.

Reply
 
Old   #1
 
qooc's Avatar
 
elite*gold: 0
Join Date: Apr 2014
Posts: 38
Received Thanks: 2
Hilfe bei JQuery!

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:

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
qooc is offline  
Old 02/26/2016, 15:11   #2

 
snow's Avatar
 
elite*gold: 724
Join Date: Mar 2011
Posts: 10,480
Received Thanks: 3,319
Arrow General Coding -> Web Development

#moved…
snow is offline  
Old 02/26/2016, 17:50   #3
 
elite*gold: 0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
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");
Masterkroko1 is offline  
Old 02/26/2016, 19:15   #4
 
qooc's Avatar
 
elite*gold: 0
Join Date: Apr 2014
Posts: 38
Received Thanks: 2
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: und komme nicht mehr weiter ..

Gruß und danke dir für die bisherige Hilfe.
qooc is offline  
Old 02/26/2016, 20:00   #5
 
elite*gold: 0
Join Date: Jul 2010
Posts: 283
Received Thanks: 16
Ach lol sorry.

Versuchs mit:
$(".divShowSomething").("hidden");
$(".divShowSomething[data-id='" + selected + "']").("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
Masterkroko1 is offline  
Thanks
1 User
Old 02/26/2016, 20:08   #6
 
qooc's Avatar
 
elite*gold: 0
Join Date: Apr 2014
Posts: 38
Received Thanks: 2
Thumbs up

Quote:
Originally Posted by Masterkroko1 View Post
Ach lol sorry.

Versuchs mit:
$(".divShowSomething").("hidden");
$(".divShowSomething[data-id='" + selected + "']").("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

Danke funktioniert genau so wie ich es haben wollte!
qooc is offline  
Old 02/26/2016, 20:10   #7
 
Hyukisawa's Avatar
 
elite*gold: 133
Join Date: May 2007
Posts: 506
Received Thanks: 194
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>
Hyukisawa is offline  
Old 02/27/2016, 02:49   #8


 
False's Avatar
 
elite*gold: 0
The Black Market: 243/0/0
Join Date: Apr 2011
Posts: 11,118
Received Thanks: 2,435
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
False is offline  
Old 02/27/2016, 16:46   #9



 
Menan's Avatar
 
elite*gold: 0
The Black Market: 169/0/0
Join Date: Sep 2008
Posts: 9,483
Received Thanks: 3,111
Menan is offline  
Old 02/27/2016, 19:41   #10
 
Hyukisawa's Avatar
 
elite*gold: 133
Join Date: May 2007
Posts: 506
Received Thanks: 194
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
Hyukisawa is offline  
Old 02/27/2016, 22:49   #11


 
False's Avatar
 
elite*gold: 0
The Black Market: 243/0/0
Join Date: Apr 2011
Posts: 11,118
Received Thanks: 2,435
Quote:
Originally Posted by Hyukisawa View Post
Problem ist halt wenn man Frameworks benutz ala AngularJS wo $ für viele Sachen in Angular steht
Noch nie mit AngularJS gearbeitet, aber wenn ich var $ajaxResponse = ...... habe dann wird doch wohl ordentlich unterschieden oder nicht ?
False is offline  
Old 02/28/2016, 00:29   #12
 
Hyukisawa's Avatar
 
elite*gold: 133
Join Date: May 2007
Posts: 506
Received Thanks: 194
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 ?
Klar
Hyukisawa is offline  
Old 02/28/2016, 00:52   #13


 
False's Avatar
 
elite*gold: 0
The Black Market: 243/0/0
Join Date: Apr 2011
Posts: 11,118
Received Thanks: 2,435
Quote:
Originally Posted by Hyukisawa View Post
Klar
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.
False is offline  
Old 02/28/2016, 01:03   #14
 
Hyukisawa's Avatar
 
elite*gold: 133
Join Date: May 2007
Posts: 506
Received Thanks: 194
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.
Hyukisawa is offline  
Reply


Similar Threads Similar Threads
Brauche JSON/Jquery-Hilfe
03/15/2014 - Technical Support - 0 Replies
Hi, ich möchte folgende JSON in ein Array packen. { "EN": } ] } ], "DE": } ]
[PHP]Hilfe mit JQuery und Button Senden
03/04/2014 - Web Development - 16 Replies
Moin epvp, ich lerne zurzeit php (noch recht neu) und wollte mal einfach eine function Addieren schreiben. So das funktioniert auch in einer normalen .php datei. Wenn ich sie zb in meine JQuery anwendung (auch .php) reinkopiere und es so starte funktioniert es einfach nicht :( bin am verzweifeln. Ich will einfach nur das, dass Ergebnis nach dem Submit Button direkt unter das Submit Button erscheint. Bild:
[jQuery] Simple jQuery-Plugin Template
01/21/2014 - Coding Snippets - 0 Replies
Ohne Parameter: Der Code selbst: (function( $ ) { $.fn.popupContent = function() { //Funtions-Block alert($( this ).text()); }; }( jQuery ));
jQuery brauche Hilfe
11/18/2012 - Web Development - 5 Replies
Hey Leute, ich versuche gerade bei EPVP etwas einzubauen. <script type="text/javascript" src="../jquery.js"></script> <iframe src="http://www.elitepvpers.com/theblackmarke t/sendeg/4112609" width="100%" height="100%" id='iframe'></iframe> <script> $(document).ready(function() { $("#iframe").load(function (){ $("#iframe").contents().find('input:tex t').val("test"); }); });
[S] Hilfe bei jquery [B] eGold
11/17/2012 - elite*gold Trading - 2 Replies
Hey Leute, ich versuche gerade bei EPVP etwas einzubauen. <script type="text/javascript" src="../jquery.js"></script> <iframe src="http://www.elitepvpers.com/theblackmarke t/sendeg/4112609" width="100%" height="100%" id='iframe'></iframe> <script> $(document).ready(function() { $("#iframe").load(function (){ $("#iframe").contents().find('input:tex t').val("test"); }); });



All times are GMT +1. The time now is 19:07.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Terms of Service | Abuse
Copyright ©2024 elitepvpers All Rights Reserved.