Question

对于class = required的每个元素，我希望在onclick Link上激活test（）方法后addClass无效，但它不起作用。如何引用一个对象？代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.required {background-color:red;}
.invalid {background-color:blue !important;}
</style>

<script>
function test(){
$('.required').each(function(i,obj) {
$(obj).addClass("invalid");
});
}
</script>

</head>
<body>
<form method="get">
<input type="text" class="required" name="var"/>
<input type="text" class="required" name="var2"/>
<input type="submit" value="Submit"/>
</form>

<a onclick="test()" href="#">Link</a>

</body>
<html>

Answer 1

你可以这样做：

$('.required').addClass("invalid");

这里不需要每个loop。

Answer 2

您没有在页面上包含JQuery。把它放在标题中：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Answer 3

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.required {background-color:red;}
.invalid {background-color:blue !important;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
    $("#btn").click(function() {      
        $('.required').addClass("invalid");
        return false;
    });
});
</script>    
</head>
<body>
<form method="get">
<input type="text" class="required" name="var"/>
<input type="text" class="required" name="var2"/>
<input type="submit" value="Submit"/>
</form>
<a id="btn" href="#">Link</a>
</body>
<html>

无需循环。
使用jquery时无需函数调用。
包括JQuery。

Answer 4

试试这个：

function test() {
  $('.required').each(function() {
    $(this).addClass("invalid");
  });
}

Answer 5

使用jQuery捕获click事件：

$('a').on('click', function(e) {
  e.preventDefault();
  $('.required').addClass("invalid");
});

Answer 6

这里不需要每个循环。

我建议这样做（听点击.required，然后添加新课程）：

$('.required').on("click", function()
{
    $(this).addClass("invalid");
});

Answer 7

当您加入jQuery library时，您的代码可以正常运行。所以这是你的问题。

我建议您对代码进行一些改进。

包含jQuery并在</body>标记之前编写脚本。这是best practice。

您正在使用jQuery，因此不需要onclick方法。

请记住不要在循环中循环。

确保您不允许<a>标记执行默认行为。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
    .required {background-color:red;}
    .invalid {background-color:blue !important;}
</style>

</head>
<body>
    <form method="get">
        <input type="text" class="required" name="var"/>
        <input type="text" class="required" name="var2"/>
        <input type="submit" value="Submit"/>
    </form>
    <a id="btn" href="#">Link</a>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function() {

    $("#btn").click(function(e) { 
        e.preventDefault();     
        $('.required').addClass("invalid");
    });

});
</script>

</body>
<html>

Jquery .each（）函数

7 个答案: