Reputation:
I have the following icons where i want to change each of it when it is clicked And change the image to its original after another image is clicked. how do i do it with jQuery?
<ul>
<li><a class="button" id="mobile-icon" href="#"><img src="images/mobile-icon.png" class="defaultimg"></a><h4>Mobile</h4></li>
<li><a class="button" id="music-icon" href="#" ><img src="images/music-icon.png" class="defaultimg"></a><h4>Music</h4></li>
<li><a class="button" id="camera-icon" href="#" ><img src="images/camera-icon.png" class="defaultimg"></a><h4>Camera</h4></li>
<li><a class="button" id="computers-icon" href="#" ><img src="images/computers-icon.png" class="defaultimg"></a><h4>Computers</h4></li>
</ul>
I only code the jquery this far.. and I am stuck. please help..
$(document).ready(function() {
$('.button').click(function(){
$('.clicked').removeClass("clicked")
$(this).addClass("clicked")
if ($(".button").hasClass("clicked")) {
var id = $(this).find('img');
var idToSRC = 'images/'+ this.id + '_hover' +'.png';
id.attr('src', idToSRC);
}else if($(".button").not("clicked")){
id.removeAttr('src', idToSRC);
}
});
Upvotes: 2
Views: 69
Reputation: 72269
change your code like below:-
$(document).ready(function() {
$('.button').click(function(){
var myid = $(this);
$('.clicked').removeClass("clicked")
myid.addClass("clicked")
var idToSRC = 'images/'+ this.id + '_hover' +'.png';
myid.find('img').attr('src', idToSRC);
$('.button').not(myid).each(function(){
$(this).find('img').attr('src', 'images/'+ this.id +'.png');
});
});
});//missed
Working example:-
$(document).ready(function() {// when document is ready
$('.button').click(function(){ // when i click on a link
var myid = $(this); // create an object variable
$('.clicked').removeClass("clicked") //remove clicked class from all links
myid.addClass("clicked") //add clicked class to current clicked link
var idToSRC = 'images/'+ this.id + '_hover' +'.png'; //create new image path
myid.find('img').attr('src', idToSRC); // change image path of current clicked link
$('.button').not(myid).each(function(){ //for each other links except the current clicked link (not(myid) is doing that job to leave current clicked link)
$(this).find('img').attr('src', 'images/'+ this.id +'.png'); //change images to orignal-one
});
});
});// you missed this in your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="button" id="mobile-icon" href="#"><img src="images/mobile-icon.png" class="defaultimg"></a><h4>Mobile</h4></li>
<li><a class="button" id="music-icon" href="#" ><img src="images/music-icon.png" class="defaultimg"></a><h4>Music</h4></li>
<li><a class="button" id="camera-icon" href="#" ><img src="images/camera-icon.png" class="defaultimg"></a><h4>Camera</h4></li>
<li><a class="button" id="computers-icon" href="#" ><img src="images/computers-icon.png" class="defaultimg"></a><h4>Computers</h4></li>
</ul>
Upvotes: 1
Reputation: 5788
You Button click
has not been close seems like some syntax error overall code is working fine please find below snippet fore more info.
$(document).ready(function() {
$('.button').click(function(){
$('.clicked').removeClass("clicked")
$(this).addClass("clicked")
if ($(".button").hasClass("clicked"))
{
var id = $(this).find('img');
//var idToSRC = 'images/'+ this.id + '_hover' +'.png';
var idToSRC = 'https://dummyimage.com/100x100/';
id.attr('src', idToSRC);
}
else if($(".button").not("clicked"))
{
id.removeAttr('src', idToSRC);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="button" id="mobile-icon" href="#"><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Mobile</h4></li>
<li><a class="button" id="music-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Music</h4></li>
<li><a class="button" id="camera-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Camera</h4></li>
<li><a class="button" id="computers-icon" href="#" ><img src="https://dummyimage.com/100x100/fffg/000" class="defaultimg"></a><h4>Computers</h4></li>
</ul>
Upvotes: 2