i want to replace class me to old when user clicks on a tag, i want to do that only with .replace function. My purpose to learn how replace method work. But the function which i have made not working.
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).attr('class').replace('me','old')
})
})
</script>
</head>
<body>
<a href="#" class="me">click</a>
</body>
i want to replace class me to old when user clicks on a tag, i want to do that only with .replace function. My purpose to learn how replace method work. But the function which i have made not working.
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
$(this).attr('class').replace('me','old')
})
})
</script>
</head>
<body>
<a href="#" class="me">click</a>
</body>
- You can start here developer.mozilla/en/JavaScript/Reference/Global_Objects/… – elclanrs Commented Jul 2, 2012 at 3:15
- "i want to do that only with" -- is there a real reason for this requirement? – zerkms Commented Jul 2, 2012 at 3:23
-
If you want to learn how to use
.replace()do it in the right context. Adding/removing classes is really pletely unrelated to string manipulation, which is the purpose of.replace()– nbrooks Commented Jul 2, 2012 at 3:25 - If you want to focus on String.replace, start by not using jQuery. – bfavaretto Commented Jul 2, 2012 at 3:26
- seriously, what's the point? Just do it the natural way, and get moving along. – Zerium Commented Aug 24, 2012 at 7:23
4 Answers
Reset to default 3replace is not a jQuery function it is a function of string. You can read more about replace here. To use replace, you can read the attribute as a string, replace the contents of the string and then add the attribute back.
I don't think it is the best way to do this if you have jQuery loaded. You can use the jQuery utility designed to do these manipulations, like so:
$(this).toggleClass('me old');
This will turn on and off (toggle) both those class names. In effect it will switch from one to the other.
Docs:
http://api.jquery./toggleClass/
you are getting the class and it doesn't effect the class attribute, you can replace the string then set it to the element:
$('a').click(function(){
var cls = $(this).attr('class').replace('me','old')
$(this).removeClass('me').addClass(cls)
})
})
$('a').click(function(){
$(this).replaceWith('<a href="#" class="old">click</a>');
});
I have created a bin with the solution on http://codebins./codes/home/4ldqpco
Try this instead:
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(){
var theclass = $(this).attr('class');
theclass = theclass.replace('me', 'old');
$(this).attr('class', theclass);
})
})
</script>
</head>
<body>
<a href="#" class="me">click</a>
</body>
That should do the trick. JSFiddle Link