Ändern von CSS für spezifische "ID" mit "this" in jQuery

Mein Hauptziel ist es, den Benutzer klicken Sie auf ein "nav" -Klassenelement und zeigen Sie eine bestimmte Absatz-ID basierend auf welche Navigationsklasse geklickt wurde. Ich kann die CSS- zu diesem Beitrag hinzufügen, wenn nötig, aber die Hauptsache ist jeder Absatz ID „Anzeige“ keine hat“.Ändern von CSS für spezifische "ID" mit "this" in jQuery

Hier ist die‚NAV‘Gegenstände.

 <div id="home" class="nav">Home</div> 
 
\t \t <div id="store" class="nav">Store</div>

Hier sind meine Absatzelemente, die eine ID der Navigations-IDs plus der Nummer 1 verwenden, die ich bei der Verwendung von jQuery am einfachsten fand, wie Sie unten in meinem jQuery-Code sehen werden:

<p id="home1">Home text</p> 
 
\t \t <p id="store1">Store text</p>

Dies ist meine jQuery-Code, der als "alert (changeCSS)" können Sie zeigt die korrekte ID ("ID" plus die Nummer 1).

\t <script type="text/javascript"> 
 

 
\t \t \t $(".nav").click(function() { 
 

 
\t \t \t \t var changeCSS = $(this).attr('id') + "1"; 
 

 
\t \t \t \t $(changeCSS).css('display', 'block'); 
 

 
\t \t \t }); 
 
\t \t 
 
\t </script>

ich im Allgemeinen zu jQuery und Programmierung bin neu, so dass es vielleicht einfach etwas, was ich hoffe. Lassen Sie mich wissen, wenn Sie irgendwelche Vorschläge haben. Vielen Dank!

Quelle

2017-01-29 Casey

Sie sind nicht # für die ID-Auswahl hinzufügen:

$('#' + changeCSS)

Quelle

2017-01-29 04:57:04 Siah

Uhum, also denkt der Downvoter, dass es kein "#" für die ID-Auswahl gibt tors? – Siah

Oops haha. Vielen Dank, das war's! Und es war nicht ich, wer fwiw – Casey

Sehen Sie sich auch die eingebaute in jQuery Effekte .hide() und .show().

In Ihrem Fall wäre es so etwas wie dieses:

  $(".nav").click(function(){ 

       var changeCSS = $(this).attr('id') + "1"; 

       $(changeCSS).show(); 

      });

So kann man leicht die Geschwindigkeit, mit der Steuerung können Sie Ihre div erscheint oder verschwindet:

$(changeCSS).hide(1000); //takes a second

Quelle

2017-01-29 05:04:46 nico

downvoted Danke dafür! Auf einer Randnotiz für Sie und alle anderen, irgendwelche Vorschläge, wie Sie alle Absatztext ausblenden, die nicht angeklickt wurde? – Casey

können Sie dies tun, indem Sie den '.not()' Selektor verwenden. Wenn Sie beispielsweise auf ein Element klicken, wird eine temporäre Klasse hinzugefügt, z. B. ".clicked". Dann versteckst du alles; dann zeigst du nur dein div und benutzt so etwas wie '.not ('angeklickt'). show()'. - bitte klicken Sie auf meine Antwort als nützlich, wenn es war) – nico

$('.nav').click(function(event){ 
 
     var tag = $(event.target); 
 
     var id= '#' + tag.attr('id') + '1'; 
 
     $(id).css('display','block') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="home" class="nav">Home</div> 
 
<div id="store" class="nav">Store</div> 
 

 

 
<p id="home1" style="display:none">this is the home paragraph</p> 
 
<p id="store1" style="display:none">this is the store paragraph</p>

Quelle

2017-01-29 05:31:45

Ändern von CSS für spezifische "ID" mit "this" in jQuery

Antwort

Verwandte Themen