Reputation: 53
so I'm relatively not very good in jQuery, and some of my code is not working and it is getting me quite stressed, I am attempting to have an item clicked, play a sound (Which I will put in later) and then when the user re-clicks the button have it turn back to its original state. The problem lies when I try to re-click the button with the changed ID (by using this new ID as an identifier) when it doesn't work.
I have created a JSFiddle here http://jsfiddle.net/uGQVh/
Any help is really appreciated.
$(document).ready(function(){
$('#guitar_string_e_active').click(function() {
$('#guitar_string_e_active').attr("id","guitar_string_e");
console.log("log");
});
$('#guitar_string_e').click(function guitar_string_e_clicked() {
$('#guitar_string_e').attr("id","guitar_string_e_active");
});
});
Upvotes: 0
Views: 93
Reputation: 43
first of all it will be better to switch class instead of switching the Id
Second , try something like that :
$('#guitar_string_e').toggle(function() {
$(this).removeClass("guitar_string_e");
$(this).addClass("guitar_string_e_active");
}, function() {
$(this).removeClass("guitar_string_e_active");
$(this).addClass("guitar_string_e");
});
Upvotes: 0
Reputation: 74420
You'd have better to toggle a class:
$('#guitar_string_e').click(function () {
$(this).toggleClass('active');
if (!$(this).is('.active')) console.log("not active");
else console.log("active");
});
Upvotes: 2
Reputation: 3215
try this
updated fiddle http://jsfiddle.net/uGQVh/1/
$(document).ready(function(){
$('#guitar_string_e').click(function (){
$('#guitar_string_e').attr("id","guitar_string_e_active");
$('#guitar_string_e_active').click(function(){
$('#guitar_string_e_active').attr("id","guitar_string_e");
console.log("log");
});
});
});
Upvotes: 0