如何检查多个类，并对jquery中的所有类应用效果？

发布于 2024-09-28 01:28:24 字数 943 浏览 1 评论 0原文

这是我在 (document).ready

$('.checkfirst').click(function() {
    if ($(".textbox").is('.required')) {
        var x = $(this).offset().top - 200;
        $(this).focus();
        $('html,body').animate({
             scrollTop: x
        }, 500);
        divHint = '<div class="formHint">This is required!</div>';
        $(this).before(divHint);
        $(this).prev(".formHint").animate({
            marginLeft: "380px",
            opacity: "1"
        }, 200);

    } else {
        $(".agreement").fadeIn();
    }
});

.checkfirst 中的代码基本上是提交按钮。

有多种字段具有 .textbox 类，其中一些字段还具有 .required 类。如果用户编辑输入字段，.required 将被删除。

因此，当用户单击 .checkfirst 时，我希望它找到所需字段，在所有字段旁边放置 divHint 并为其设置动画，然后滚动到第一个输入字段是必需的（也给予它焦点）。

现在我知道我的代码只是将 divHint 应用于提交按钮（this）。我需要以某种方式设置一个循环，但我不知道该怎么做。

原文

Here is my code within (document).ready

$('.checkfirst').click(function() {
    if ($(".textbox").is('.required')) {
        var x = $(this).offset().top - 200;
        $(this).focus();
        $('html,body').animate({
             scrollTop: x
        }, 500);
        divHint = '<div class="formHint">This is required!</div>';
        $(this).before(divHint);
        $(this).prev(".formHint").animate({
            marginLeft: "380px",
            opacity: "1"
        }, 200);

    } else {
        $(".agreement").fadeIn();
    }
});

.checkfirst is basically the submit button.

There are various fields with a class of .textbox, and some of them have a .required class as well. If the person edits the input field, .required is removed.

So when the user clicks .checkfirst, I want it to find the required fields, put and animate the divHint next to all of them, then scroll to the first input field that is required (giving it focus as well).

Right now I know my code just applies divHint to the submit button (this). I need to setup a loop somehow, and I am not sure how to do it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故人如初 2024-10-05 01:28:24

您正在寻找的函数是 jQuery 的each() 函数。如果您将它与某种验证标志变量结合使用，这应该非常简单。例如，您可以将类似这样的内容放入 checkfirst 单击处理程序中：

var validated = true;
$(".textbox").each(function(){
    if ($(this).hasClass("required")){
        validated = false;
        //do all the animations here
    }
});
if (validated)
    $(".agreement").fadeIn();

The function you're looking for is jQuery's each() function. If you use it in combination with some kind of validation flag variable, this should be pretty simple. For example, you could put something like this inside the checkfirst click handler:

var validated = true;
$(".textbox").each(function(){
    if ($(this).hasClass("required")){
        validated = false;
        //do all the animations here
    }
});
if (validated)
    $(".agreement").fadeIn();

回复收藏 0 原文

~没有更多了~