CODEWITHSUNDEEP
jqueryaddclass
Kim
Kim

Reputation: 1156

Adding class to clicked element

I'm trying to add a class to a clicked element. There are multiple elements with unique IDs so I "don't know" what the ID of the element is.

Can I use a modified version of the below code to achieve this?

Jquery:

$(document).ready(function () {
    $(this).on('click', function () {
        $(this).addClass('widget-selected');
    });
});

EDIT:

A markup can be like this:

<h1 id="textHolder1" contenteditable="true">Text to edit</h1>

Upvotes: 7

Views: 37484

Answers (5)

Adil Shaikh
Adil Shaikh

Reputation: 44740

if you have multiple element's like this (as you posted your markup) -

<h1 id="textHolder1" contenteditable="true">Text to edit</h1>
<h1 id="textHolder2" contenteditable="true">Text to edit</h1>
<h1 id="textHolder3" contenteditable="true">Text to edit</h1>

You can do this -

 $(document).ready(function() {  
    $("h1[id^='textHolder']").on('click', function() {
       $(this).addClass('widget-selected');
    });
 });

Upvotes: 3

SpYk3HH
SpYk3HH

Reputation: 22570

You need to use a selector to have an element to click on:

$(document).ready(function () {
    $(this).on('click', function () {  //  here $(this) is refering to document
        $(this).addClass('widget-selected');
    });
});

For example:

If your HTML were:

<ul>
    <li><p>Click</p></li>
    <li><p>Me</p></li>
</ul>

Then you're JavaScript could be:

$(function() {
    $("li").on("click", function(e) {  // See here, i have our selector set to "li", so this jQuery object will grab all li tags on the page
        $(this).addClass("widget-selected").siblings().removeClass("widget-selected");
    });
})

To select any element:

$(function() {
    $("*").on("click", function(e) {  // selects any element
        e.stopPropagation(); // stops click event from bubbling up from child
        $(".widget-selected").removeClass("widget-selected"); // remove all previously selected classes
        $(this).addClass("widget-selected"); // add our new class
    });
})

Example jsFiddle HERE

Later Example using *

More about jQuery selectors

Upvotes: 8

Seder
Seder

Reputation: 2763

It depends on the element type and parents, children anything that can lead you to that element let's say that the element is an anchor so you make it like this 

$(document).ready(function () {
    $('a').on('click', function () {
        $(this).addClass('widget-selected');
    });
});

Or all the elements are childs of parent class parent

$(document).ready(function () {
    $('.parent a').on('click', function () {
        $(this).addClass('widget-selected');
    });
});

There are a lot of ways to achieve this

If you posted HTML code it will help very much

If you are generating the ID's dynamically you can make a string of them like the following 

var str = "#firstID,#secondID,#third,#fourth";

and use it like this 

$(document).ready(function () {
    $(str).on('click', function () {
        $(this).addClass('widget-selected');
    });
});

I hope this can lead you to your goal

EDIT

after you added the HTML you should take a look at the following

http://api.jquery.com/attribute-starts-with-selector/

OR you can select using contenteditable=true

Some of the folks here added an answer about the starts with attribute

Upvotes: 1

Stan
Stan

Reputation: 26511

You can use * to select everything.

$(function(){
    $('*').on('click', function(){
        $(this).addClass('widget-selected')
    });
});

Upvotes: 1

steo
steo

Reputation: 4656

I would try with this..

 $(document).ready(function () {

     //this will attach the class to every target 
     $(document).on('click', function (event) {
         $target = $(event.target);   
            $target.addClass('widget-selected');
        });

    })

or if you want to check a certain id use 

  ...
  if(event.target.id === "idname") { ... }
  ...

Upvotes: 9

Related Questions