jquery - Using regex to change sub element image from off to on and back -
In an effort to keep the code, I was hoping to use a regular expression with jquery to hover an image for.
$ (function () {$ ("ul.dropdown li"). Hover (function () {$ (this) $ ('ul: Css ('visibility', 'visible');}, function () {$ (this) .removeClass ("hover"); $ ('ul: first', this). CSS ('visibility ',' Hidden ');});});
html:
& lt; Ul class = "dropdown" & gt; & Lt; Li & gt; & Lt; A href = "" & gt; & Lt; IMG src = "picture / nav_first_of page" /> & Lt; / A & gt; & Lt; Ul class = "sub_menu sub1" & gt; & Lt; Li & gt; & Lt; Div class = "topnav_dropdown_left" & gt; & Lt; A href = "" & gt; & Lt; IMG src = "picture / topno_dropdown_first.fg.jpg" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; & Lt; Img src = "picture / nav_second_off.png" /> & Lt; / A & gt; & Lt; Ul class = "sub_menu sub2" & gt; & Lt; Li & gt; & Lt; Div class = "topnav_dropdown_left" & gt; & Lt; A href = "" & gt; & Lt; IMG src = "picture / topname_dropdown_second.agegg" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; & Lt; IMG src = "Pictures / Navigation_off pages" /> & Lt; / A & gt; & Lt; Ul class = "sub_menu all 3" & gt; & Lt; Li & gt; & Lt; Div class = "topnav_dropdown_left" & gt; & Lt; A href = "" & gt; & Lt; IMG src = "picture / topno_dropdown_third.gegpg" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
Therefore, using the regex using the hover function to switch the above nav_first_off.png, nav_second_off.png with li hover, and switch to _off.png and switch to _on.png By doing <
You can pass the src
attribute to a function For example:
$ (function () {$ ("ul.dropdown li"). Hover (function () $ $ (this) .addClass ("hover");}) $ ('Ul: first', this). CSS ('visibility', 'view'); $ ('an IMG', this). 'Src', function (i, src) {return src.replace (' _ Off ',' _ on ');})}}, function () {$ (this) .removeClass ("hover"); $ ('Ul:' first ', this). CSS ('visibility', 'hidden'); $ ('An IMG', this) .attr ('src', function (i, src) {return src.replace ('_ on' '_off');});}); }); In the
function, src
parameter function (i, src)
is old src
value, so we Just doing it on one, you can pass as much more complex regex as it is necessary.
Comments
Post a Comment