add class to span element with onClick javascript

Question

I'm searching hours for an solution and found some answers, but not a quite fitting one.

I have several <span id="same-id-for-all-spans"></span> elements with each of them including one <img> element. Now I want to create a print template, to only print those elements which have a specific class added to it.

The question is, how can I add a class to a span by clicking on it. This way I want to "mark" several spans which then have an underlying print-css style to only print the ones with the specific*class*. Important: It should be possible to click (add class) and reclick (delete class) for single spans.

Thank you so much. Best Regards Mazey

its a wordpress return for all the spans, so same id. at the moment I have this js included:

<script type="text/javascript">
function changeid ()
{
var e = document.getElementById("nonprintable");
e.id = "printable";
}

</script>

and the wordpress code looks like this:

<?php
        $args = array('post_type' => 'attachment', 'post_parent' => $post->ID,  'orderby' => 'menu_order', 'order' => 'ASC'); 
                $attachments = get_children($args); 
foreach ( $attachments as $attachment_id => $attachment ) {


echo '<span id="nonprintable"  onClick="changeid()" >';
           echo wp_get_attachment_image( $attachment->ID, 'large' );

      echo '</span>';

          }


?>

Right now when I click on a span I see that it changes the id. But it changes it just top to bottom with every click on a span and not on a specific span I click.

can you not edit he PHP code where it assigns a unique ID to the span? Are you thinking of setting IDs after the page has been rendered? I dont think thats a good idea whatever it is you are trying to achieve — manraj82
– manraj82, Commented Jun 27, 2013 at 13:12
like explained above, I want to add classes to the spans afterwards, so that in the print template the class-name decides which image is displayed, and which ones are not. If u have any other suggestion, I'm happy :) — Mazey
– Mazey, Commented Jun 27, 2013 at 13:22
I think I dont need the "id". The "class" I only need for the print template. Instead of the "id" I only want to change the style of the span. So when I click one, I want it to have a border. Can someone help me with that? — Mazey
– Mazey, Commented Jun 27, 2013 at 13:33

Bhushan Kawadkar · Accepted Answer · 2013-06-27 13:00:49Z

5

you can use

jQuery('span').click(function(){
  jQuery(this).toggleClass('yourSpecialClass');
});

answered Jun 27, 2013 at 13:00

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

reggaemahn Over a year ago

This would grab all the span elements on the page which might not be desired.

Mazey Over a year ago

Hi, thanks at first. sadly it doesnt work :( My setting explained above is working, except that it just changes the id in sequence, instead of just on the span I'm clicking. Thats because of the same id name I know. But how can I integrate the $this in my code...so that it only changes the id of the span I'm actually clicking?

reggaemahn · Accepted Answer · 2013-06-27 13:05:42Z

1

First of all, you should not have the same id for all your spans. Instead add a class to all of them like this:

<span class="selectable"></span>

Then you can do this:

$(function(){
  $(".selectable").click(function(){
     $(this).toggleClass("selected");
  });
});

And then in your function

function getAllSelected(){
   var selected = $(".selected"); // This will give you all the selected elements.
}

answered Jun 27, 2013 at 13:05

reggaemahn

6,7286 gold badges39 silver badges64 bronze badges

Comments

Jeandre Pentz · Accepted Answer · 2013-06-27 12:58:54Z

0

could use the following

$("span").click(function() {
   if($(this).hasClass("classname"))
   {
      $(this).removeClass("classname");
   }
   else
   {
      $(this).addClass("classname");
   }

});

answered Jun 27, 2013 at 12:58

Jeandre Pentz

1,0022 gold badges10 silver badges20 bronze badges

Comments

tymeJV · Accepted Answer · 2013-06-27 12:59:29Z

0

Add an onclick handler and toggle CSS classes:

JS:

function addClass(obj) {
    obj.className ? obj.className = "" : obj.className = "test";
}

CSS:

.test {
    color: red;
}

HTML Span:

<span onclick="addClass(this)">Click me!</span>

Demo: http://jsfiddle.net/yXWcW/1/

Edit: Didn't see the jQuery tag, use toggleClass for that.

answered Jun 27, 2013 at 12:59

tymeJV

105k14 gold badges165 silver badges158 bronze badges

4 Comments

Mazey Over a year ago

Hi, I have an additional question. How is the way, if I want to add an "id" instead of a "class"? thank u.

tymeJV Over a year ago

If you want to add an id, you can do obj.id = "newId"; remember, ID's should be unique as well.

Mazey Over a year ago

Hi again tymeJV. Could you help with adding a style="" tag to the span on click? Already tried with function addClass(obj) { obj.className ? obj.className = "" : obj.className = " noprint"; obj.css({ border: "5px solid #E3E3E3", margin: "5px", display: "inline-block" });} but its not working. Thank you.

tymeJV Over a year ago

You were close, since you also have jQuery, use $(obj).css({ border: "5px solid #E3E3E3", margin: "5px", display: "inline-block" })

manraj82 · Accepted Answer · 2013-06-27 13:21:34Z

0

    <div class="items">
        <span class="item">Click Item 1</span>    
        <span class="item">Click Item 2</span>  
        <span class="item">Click Item 3</span>  
    </div>

   <div class="btn-getSelectedItems">Get Selected Items</div>

   $(function(){
        $('.items .item').click(function(){
            $(this).toggleClass('selected');
        })

       $('.btn-getSelectedItems').click(function(){
         if($('.items .selected').length){
            console.log($('.items .selected'))
         }
       })
    })

edited Jun 27, 2013 at 13:21

answered Jun 27, 2013 at 13:07

manraj82

6,40525 gold badges59 silver badges85 bronze badges

Comments

Shawn G. · Accepted Answer · 2013-06-27 14:05:14Z

0

You can do this

<span id="nonprintable"  onClick="changeid(this)" >

added "this" to arguments

and your function would be

<script type="text/javascript">
function changeid (e){//added e to accepted arguments
    e.id = "printable";
    //e is the element so you are only changing that one elements id
}
</script>

or you can just use jQuery's .toggleClass

<span onclick="$(this).toggleClass('your-classname');">Click me!</span>

Since you have multiple instances (I would recomend classes instead of id's)

$('#same-id-for-all-spans').click(function(){

    $(this).toggleClass('your-classname');

});

Here is the jQuery doc for .toggleClass()

http://api.jquery.com/toggleClass/

edited Jun 27, 2013 at 14:05

answered Jun 27, 2013 at 13:06

Shawn G.

6224 silver badges16 bronze badges

Collectives™ on Stack Overflow

add class to span element with onClick javascript

6 Answers 6

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related