jQuery 将类添加到单击的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16575343/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding class to clicked element
提问by Kim
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.
我正在尝试向单击的元素添加一个类。有多个具有唯一 ID 的元素，所以我“不知道”元素的 ID 是什么。
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>
回答by steo
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 iduse
或者如果你想检查某个id用途
...
if(event.target.id === "idname") { ... }
...
回答by Mohammad Adil
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');
});
});
回答by SpYk3HH
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:
如果您的 HTML 是：
<ul>
<li><p>Click</p></li>
<li><p>Me</p></li>
</ul>
Then you're JavaScript could be:
那么你的 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");
});
})
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
示例 jsFiddle HERE
Later Example using *
稍后使用 * 的示例
回答by Stan
You can use *to select everything.
您可以使用*来选择所有内容。
$(function(){
$('*').on('click', function(){
$(this).addClass('widget-selected')
});
});
回答by Seder
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
或者所有元素都是父类的孩子 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
如果你发布了 HTML 代码，它会很有帮助
If you are generating the ID's dynamically you can make a string of them like the following
如果您动态生成 ID，则可以制作如下所示的字符串
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
添加 HTML 后，您应该查看以下内容
http://api.jquery.com/attribute-starts-with-selector/
http://api.jquery.com/attribute-starts-with-selector/
OR you can select using contenteditable=true
或者您可以选择使用 contenteditable=true
Some of the folks here added an answer about the starts with attribute
这里的一些人添加了关于属性开头的答案
