开发者

how to check for multiple classes, and apply effect to all of them in jquery?

开发者 https://www.devze.com 2023-01-21 00:27 出处:网络
Here is my code within (document).ready $(\'.checkfirst\').click(function() { if ($(\".textbox\").is(\'.required\')) {

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 th开发者_运维知识库e 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.


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

精彩评论

暂无评论...
验证码 换一张
取 消