jquery changing image src
Solution 1
Demo: http://jsfiddle.net/235ap/
You won't see the image changing in the demo but if you look at the inspector, it's changing.
HTML
<ul class="nav">
<li class="header">Quick Access:</li>
<li>
<a id="itemLink" href="#">Add Item</a>
<img id="Mitemimg" class="qaimg" src="images/icon_trace.gif">
</li>
<li>
<a id="adminLink" href="#">Add Administrator</a>
<img id="menuIMG" class="qaimg" src="images/icon_trace.gif">
</li>
</ul>
<div id="main">
<h1>Actions Required:</h1>
<div id="forms">
<table id="addItem" class="linkForm" style="display: none;">
<tr>
<td>addItemTable</td>
</tr>
</table>
<table id="addAdmin" class="linkForm" style="display: none;">
<tr>
<td>addAdminTable</td>
</tr>
</table>
</div>
</div>
JS
$(document).ready(function () {
$('#adminLink').click(function(event) {
event.preventDefault();
change('#menuIMG', '#addAdmin');
});
$('#itemLink').click(function(event) {
event.preventDefault();
change('#Mitemimg', '#addItem');
});
});
function change(imgId, divId) {
// reset img src
$('.qaimg').attr('src', 'images/icon_trace.gif');
// set img src
$(imgId).attr('src', 'images/icon_sync.gif');
// slide up all
$('#forms .linkForm').slideUp('slow', function() {
// slide down div
$(divId).slideDown('slow', function() {});
});
}
in above function change, when the link is selected for the second time. In stead of sliding up, it slides up and then back down. Below is the same function with changes made for it to work properly.
function change(imgId, divId) {
//check to see if div is visable
var vis = ($(divId).css('display') == 'none')? false:true;
// slide up all
$('#forms .linkForm').slideUp('slow', function() { });
// reset img src
$('.qaimg').attr('src', 'images/icon_trace.gif');
// if div isn't visable
if(!vis){
// slide down div
$(imgId).attr('src', 'images/icon_sync.gif');
// set img src
$(divId).slideDown('slow', function() {});
}
}
Solution 2
You haven't posted the HTML for me to confirm this but I'd start with the basics - you're using camelcase for the second item in the HidelemArr
array (addAdmin), but the first item in it (additem) is all lowercase.
Check your HTML to ensure the names match up with that capitalisation. Try to standardise your capitalisation too if you can.
Trae Moore
Currently looking for opportunities that are either remote or in Houston, Tx and/or the surrounding area.
Updated on February 24, 2020Comments
-
Trae Moore about 4 years
The code with
$("#adminLink")
works just fine, but the$("#itemLink")
doesn't. I've tried everything I can think of. I think i need a fresh pair of eyes. All I'm trying to do is change the src of these two img when an element is clicked.code:
$(document).ready(function () { HidelemArr = new Array(); HidelemArr[0] = "addItem"; HidelemArr[1] = "addAdmin"; //* hide presets $.each(HidelemArr, function () { $("#" + this).hide(); }) //* $("#adminLink").click(function () { var chld = $("#menuIMG"); var vis = (document.getElementById(HidelemArr[1]).style.display == 'block') ? 1 : 0; changeDisplay(HidelemArr[1], vis, chld); }); $("#itemLink").click(function () { var chld = $("#Mitemimg"); var vis = (document.getElementById(HidelemArr[0]).style.display == 'block') ? 1 : 0; changeDisplay(HidelemArr[0], vis, chld); }); }); function changeDisplay(id, vis, chld) { $.each(HidelemArr, function () { if ((this == id) && (vis == 0)) { chld.attr("src", "images/icon_sync.gif"); $("#" + this).slideDown('slow', function () {}); } else { chld.attr("src", "images/icon_trace.gif"); $("#" + this).slideUp('slow', function () {}); } }) }
html:
<ul> <li class="header">Quick Access:</li> <li ><span id="itemLink"> <a >Add Item</a> <img id="Mitemimg" class="qaimg" src="images/icon_trace.gif"></span></li> <li ><span id="adminLink"> <a >Add Administrator</a> <img id="menuIMG" class="qaimg" src="images/icon_trace.gif"></span></li> </ul> </div> <div id="main"> <h1>Actions Required:</h1> <div id="forms"> <table class="linkForm" id="addItem"> <?php require_once 'additemform.php'; ?> </table> <table class="linkForm" id="addAdmin"> <?php require_once 'addAdminForm.php'; ?> </table> </div> </div>
-
Trae Moore about 11 yearshtml is there... any more suggestions?