6

我正在尝试向单击的元素添加一个类。有多个具有唯一 ID 的元素，所以我“不知道”元素的 ID 是什么。

我可以使用以下代码的修改版本来实现这一点吗？

查询：

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

编辑：

标记可以是这样的：

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

5 回答 5

9

我会尝试这个..

 $(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") { ... }
  ...
于 2013-05-15T21:37:39.980 回答
6

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

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

示例 jsFiddle 这里

稍后使用 * 的示例

更多关于 jQuery 选择器的信息

于 2013-05-15T21:37:42.267 回答
3

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

<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');
    });
 });
于 2013-05-15T21:38:35.160 回答
1

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

$(function(){
    $('*').on('click', function(){
        $(this).addClass('widget-selected')
    });
});
于 2013-05-15T21:37:59.680 回答
1

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

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

这里的一些人添加了关于以属性开头的答案

于 2013-05-15T21:41:48.203 回答