-2

对于每个带有 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>
4

7 回答 7

9

你可以这样做：

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

这里不需要每个loop。

于 2013-07-23T13:57:01.530 回答
3

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

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
于 2013-07-23T13:59:52.177 回答
2 
<!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。
于 2013-07-23T14:00:57.967 回答
1

试试这个：

function test() {
  $('.required').each(function() {
    $(this).addClass("invalid");
  });
}
于 2013-07-23T13:58:29.367 回答
1

用 jQuery 捕捉点击事件：

$('a').on('click', function(e) {
  e.preventDefault();
  $('.required').addClass("invalid");
});
于 2013-07-23T13:59:43.610 回答
0

这里不需要每个循环。

我建议这样做（听点击 .required，并添加新类）：

$('.required').on("click", function()
{
    $(this).addClass("invalid");
});
于 2013-07-23T14:02:12.503 回答
0

当您包含jQuery 库时，您的代码可以正常工作。所以这是你的问题。

不过，我会建议对您的代码进行一些改进。

</body>包括 jQuery 并在标记之前编写脚本。这是一个最佳实践。

您正在使用 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>
于 2013-07-23T14:08:28.880 回答