December 11th, 2013, 03:00 AM
-
How may I underline one para at a time in jQuery?
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#1").click(function(){
$(this).css('text-decoration', 'underline');
});
$("#2").click(function(){
$(this).css('text-decoration', 'underline');
});
$("#3").click(function(){
$(this).css('text-decoration', 'underline');
});
});
</script>
<body>
<p id="1">If you click on me, I will underline myself.</p>
<p id="2">Click me away!</p>
<p id="3">Click me too!</p>
</body>
In this code, whenever I click on a paragraph, it underlines. How can I do something like when I click on one paragraph and then the other and then the other, it will take away the previous underlines?
Meaning, at a time, there can be only ONE paragraph underlined by the user; how may I do it?
December 11th, 2013, 03:08 AM
-
The only way I can think of (and please bear in mind it's only 9am here) is to add some lines to remove the un-necessary underlines into the existing click functions
I'm sure there's a way to bind a single event to multiple elements but I'll let you google that (the idea being is that you can add a "clear all underlines" event first and THEN underline the paragraph you desire)
"For if leisure and security were enjoyed by all alike, the great mass of human beings who are normally stupefied by poverty would become literate and would learn to think for themselves; and when once they had done this, they would sooner or later realise that the privileged minority had no function and they would sweep it away"
- George Orwell, 1984
December 11th, 2013, 03:22 AM
-
Originally Posted by badger_fruit
The only way I can think of (and please bear in mind it's only 9am here) is to add some lines to remove the un-necessary underlines into the existing click functions
I'm sure there's a way to bind a single event to multiple elements but I'll let you google that (the idea being is that you can add a "clear all underlines" event first and THEN underline the paragraph you desire)
http://jsfiddle.net/4FAdp/
<del>Not working...</del>
WORKED!
Thanks so much, though, any idea how may I make this code more efficient?
Last edited by Akshat1; December 11th, 2013 at 03:25 AM.
December 11th, 2013, 03:40 AM
-
Originally Posted by Akshat1
http://jsfiddle.net/4FAdp/
<del>Not working...</del>
WORKED!
Thanks so much, though, any idea how may I make this code more efficient?
http://jsfiddle.net/4FAdp/8/