将类添加到单击的元素

Question

我正在尝试为点击的元素添加一个类。有多个元素具有唯一ID，因此我“不知道”元素的ID是什么。

我可以使用以下代码的修改版本来实现此目的吗？

Jquery的：

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

修改

标记可以是这样的：

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

Answer 1

我会尝试这个..

 $(document).ready(function () {

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

    })

或者如果您想检查某个id使用

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

Answer 2

如果您有多个这样的元素（发布您的标记） -

<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>

你可以这样做 -

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

Answer 3

您需要使用选择器来点击一个元素：

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

例如：

如果你的HTML是：

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

然后你的JavaScript可能是：

$(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");
    });
})

选择任何元素：

$(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

Answer 4

这取决于元素类型和父母，孩子可以引导你到那个元素的东西让我们说这个元素是一个锚，所以你就这样做了

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

或者所有元素都是父类parent

的子元素

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

有很多方法可以实现这个目标

如果您发布了HTML代码，那将非常有用

如果您正在动态生成ID，您可以像下面的

一样创建一个字符串

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

并像这样使用

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

我希望这可以引导您实现目标

编辑

添加HTML后，您应该查看以下内容

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

或者您可以使用contenteditable=true

进行选择

这里的一些人添加了关于属性

的开头的答案

Answer 5

您可以使用*选择所有内容。

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