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>

回答1:

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") { ... }
  ...

回答2:

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

回答3:

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');
    });
 });

回答4:

You can use * to select everything.

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

回答5:

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

来源：https://stackoverflow.com/questions/16575343/adding-class-to-clicked-element

标签

jquery

addclass