如何向带有JQuery自定义属性的标记添加类?

How can you add a class to a tag with a custom attribute? Most people use ID, but in my case I need to use a custom attribute.

如何向带有自定义属性的标记添加类?大多数人使用ID，但在我的情况下，我需要使用自定义属性。

CSS:

.correct {
    background-color: lightGREEN;
}

JQuery:

$(".save").on("click", function(){
    $("input[custom='50']").addClass("correct");
}

HTML:

<button type='button' class='save' value='Save' custom='50' >Save</button>

bootply:

bootp:

http://www.bootply.com/XgCASbBRZR

2 个解决方案

#1

You're missing a parenthesis in your jquery, and are adding the class correct to an input, so I added the input to your html.

您在jquery中漏掉了一个圆括号，并且正在向一个输入添加类的正确性，所以我将输入添加到您的html中。

$(".save").on("click", function(){
    $("input[custom='50']").addClass("correct");
});

.correct {
    background-color: lightGREEN;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='save' value='Save' custom='50' >Save</button>
<input custom="50">

If you're intending to change the background color of the button, reference the button in your jquery

如果您打算更改按钮的背景颜色，请在jquery中引用该按钮

$(".save").on("click", function(){
    $("button[custom='50']").addClass("correct");
});

.correct {
    background-color: lightGREEN;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='save' value='Save' custom='50' >Save</button>

#2

You can use this keyword, which represents a reference to the object that invoked the current function. In our case, the button clicked.

您可以使用这个关键字，它表示对调用当前函数的对象的引用。在我们的例子中，按钮被点击了。

 $(this).addClass("correct");

$(".save").on("click", function(){
    $(this).addClass("correct");
});

.correct {
    background-color: lightGREEN;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class='save' value='Save' custom='50' >Save</button>

If you want to select a DOM element by custom attribute you have to use this:

如果您想通过自定义属性选择DOM元素，您必须使用以下方法:

$('button[custom="50"]').addClass("correct");

#1