#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    100
    Rep Power
    2

    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?
  2. #2
  3. Confused badger
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2009
    Location
    West Yorkshire
    Posts
    1,112
    Rep Power
    487
    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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    100
    Rep Power
    2
    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.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    100
    Rep Power
    2
    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/

IMN logo majestic logo threadwatch logo seochat tools logo