html - JQuery: Toggling hide/show div elements - Is there a more efficient method? -
I have four div elements among which I am toggle between:
& lt; ! - Toggle Control - & gt; & Lt; Span id = "todayToggle" & gt; Today & lt; / Span & gt; & Lt; Span id = "toggle for tomorrow" & gt; Yesterday & lt; / Span & gt; & Lt; Span id = "third toggle" & gt; Third day & lt; / Span & gt; & Lt; Span id = "fourth toggle" & gt; On the fourth day & lt; / Span & gt; & Lt ;! - Divisions to hide / show - & gt; & Lt; Div class = "premium" id = "today" & gt; & Lt; H3 & gt; The first day & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "premium" id = "tomorrow" & gt; & Lt; H3 & gt; The second day & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "premium" id = "third day" & gt; & Lt; H3 & gt; Third day & lt; / H3 & gt; & Lt; / Div & gt; & Lt; Div class = "premium" id = "fourth day" & gt; & Lt; H3 & gt; On the fourth day & lt; / H3 & gt; & Lt; / Div & gt; Here I am using JQuery to hide / show individual elements. The "Today" div is shown on page load by default. My objective is to show only the div selected and hide the other three, it is certain that the element has been selected.
& lt; Script & gt; $ (Document) .ready (function () {$ ("# tomorrow, # third day, # fourth day") Hide (); $ ("# todaytoggle") Click (function () {$ ("$ $ ("# Tomorrow"). $ ("# Today"). $ ("# Today"). Show ();}); $ ("# tomorrowToggle") Click (function () {$ ($ (" Third toggle "). Click (function () {$}" $ "$ (" # fourth day "$ (" # today #, tomorrow, # third day "). Hidden (); $ (" # fourth day " "). Show ();});}); & lt; / script> This works, but it is actually disabled and I am sure that There is a very clean and practical solution. Any help and support Gah was greatly appreciated.
An approach, though in the id the latter two div of elements: $ ('span [id]'). ('Click', function () {var click = this; $ ('premium') '). Hide (). Filter (function () {this.id == clicked.id.replace (' Toggle ',' ');}). Show ();}). () .click (); < / Code> .
Alternatively, based on the mapping of the text of the element clicked on id : $ ('Span [id]'). ('Click', function () {var click = $ (this); $ ('. Premium'). Id === $ .trim (clicked.text ()). ToLowerCase (). Replace (/ \ s + / G, '-');}). Show ();}) first (). Click (); .
Or, and possibly at the end, using the pointer to the clicked element (assuming the element for the click element and element to show the same index):
$ ('Span [id]'). ('Click', function () {var click = $ (this); $ ('premium'). Hide (). Eq (Clicked.index ('span [id]')). Show ();}) . first (). Click (); .
Reference:
- Javascript:
-
-
- jQuery:
-
-
-
-
-
-
-
-
-
Comments
Post a Comment