美文网首页JQuery前端开发那些事前端攻城狮
jquery 的 each 方法中 return 的坑

jquery 的 each 方法中 return 的坑

作者: 天天向上卡索 | 来源:发表于2017-04-22 23:10 被阅读109次

    jquery 的 each 方法中 return 的坑

    Chapter 0

    在项目中使用 jquery 的 each 方法时想在 each 的循环中返回一个布尔类型的值于是掉进一个坑中...

    Chapter 1

    最初的代码:

        $(":checkbox[name='insurace-category']:checked").each(function (index, ele) {
            var _item = $(".gift_option_item_" + $(ele).val());
            if (_item && _item.length > 0) {
                var _premium = $.trim($(_item).find(".custom_inputbox").eq(0).val());
                var _selectElement = $(_item).find("select");
                if (_selectElement && _selectElement.length > 0) {
                    var _amount = $.trim($(_selectElement).val());
                    if (!_amount) {
                        layer.msg("请选择保额!", function () {
                            $(_selectElement).focus();
                        });
                        return false;
                    }
                }
                if (!_premium) {
                    layer.msg("请输入保费!", function() {
                        $(_item).find(".custom_inputbox").eq(0).focus();
                    });
                    return false;
                }
            }
        });
    

    这里的代码,虽然return 了,但是并未实际 return 值作为方法的返回值,而且还是继续往后执行。
    在网上查询之后发现在 jquery 的 each 方法中如果 return true 相当于是 continue,而 return false 相当于是 break
    我的解决方案如下:

    Chapter 2

    修改后的代码:

        var _isInvalid = false;
        $(":checkbox[name='insurace-category']:checked").each(function (index, ele) {
            var _item = $(".gift_option_item_" + $(ele).val());
            if (_item && _item.length > 0) {
                var _premium = $.trim($(_item).find(".custom_inputbox").eq(0).val());
                var _selectElement = $(_item).find("select");
                if (_selectElement && _selectElement.length > 0) {
                    var _amount = $.trim($(_selectElement).val());
                    if (!_amount) {
                        layer.msg("请选择保额!");
                        $(_selectElement).focus();
                        _isInvalid = true;
                        return false;
                    }
                }
                if (!_premium) {
                    layer.msg("请输入保费!");
                    $(_item).find(".custom_inputbox").eq(0).focus();
                    _isInvalid = true;
                    return false;
                }
            }
        });
        if (_isInvalid) {
            return false;
        }
    

    我这里借助了一个变量来辅助判断,当不满足条件时设置为 true ,在循环外判断这个变量的值,如果变量的值是 true 则证明又不合法的值,如果变量的值为 false,则证明所需要判断的值都符合要求

    Summary

    jquery each 方法中的 return 实际上是不会 return 啊,在 jquery each 方法中 return false,可以借助一个外部变量来辅助实现我们想要的功能。

    相关文章

      网友评论

      本文标题:jquery 的 each 方法中 return 的坑

      本文链接:https://www.haomeiwen.com/subject/verezttx.html