Jquery 根据最大数据量和数据分钟值与验证消息切换 li

Question

• 我希望能够选择一个图像(li(，选择项目的数量取决于(主div(上的最大数据和数据最小值

问题出在所选函数中，我正在删除列表中项目的已检查状态和所选类别

所以它一直有效，直到我选择顶部然后它变得困惑我需要将验证更改为仅返回真或假

演示http://jsfiddle.net/XeELs/346/

.JS

(function () {
    var mobileForms = (function () {
        return {
            model: {
                selection: {
                    validate: {
                        test: function (e) {
                            var that = this,
                                modelSelector = $('.divModelOptions'),
                                chosen = $('input:checked', modelSelector),
                                messages = $('.message', modelSelector),
                                minMessage = $('.min', modelSelector),
                                maxMessage = $('.max', modelSelector);

                            if (typeof (that.messageDisplayTime) !== 'undefined') clearTimeout(that.messageDisplayTime);
                            if (chosen.length >= that.min && chosen.length <= that.max) {
                                messages.slideUp(200);
                                return true;
                            } else if (chosen.length > that.max) {
                                if (that.max > 1) {
                                    maxMessage.slideDown(400, function () {
                                        that.messageDisplayTime = setTimeout(function () {
                                            maxMessage.slideUp(200);
                                        }, 3000);
                                    });
                                    if (typeof (e) !== 'undefined') e.preventDefault();
                                    return false;
                                } else {
                                    chosen[0].checked = false;
                                    chosen.parents('li').removeClass('selected');
                                    return true;
                                }
                            } else {
                                minMessage.slideDown(400);
                                return 'fail';
                            }
                        },
                        init: function () {
                            var modelSelector = $('.divModelOptions'),
                                html = '';
                            this.min = parseInt(modelSelector.attr('data-min'), 10);
                            this.max = parseInt(modelSelector.attr('data-max'), 10);
                            html = '
                                <ul class="validation">
                                    <li class="message min">' + modelSelector.attr('data-min-msg') + '</li>
                                    <li class="message max">' + modelSelector.attr('data-max-msg') + '</li>
                                </ul>';
                            modelSelector.prepend(html);
                        }
                    },
                    bindHandlers: function () {
                        var that = this,
                            modelSelector = $('.divModelOptions'),
                            chosen = $('input:checked', modelSelector);
                        var max = parseInt(modelSelector.attr('data-max'), 2);
                        $('input', modelSelector).click(function (e) {
                            var parent = $(this).parents('li');
                            if (that.validate.test(e)) {
                                if (parent.hasClass('selected')) {
                                    parent.removeClass('selected');
                                } else {
                                    parent.addClass('selected');
                                }
                            }
                        });
                        if (chosen.length) {
                            chosen.parents('li').addClass('selected');
                            that.validate.test();
                        }
                        $('form').submit(function (e) {
                            if (!that.validate.test() || that.validate.test() === 'fail') e.preventDefault();
                        });
                    },
                    init: function () {
                        this.validate.init();
                        this.bindHandlers();
                    }
                },
                nextButton: {
                    bindHandlers: function (button) {
                        button.one('click', function () {
                            mobileForms.showNextStep();
                        });
                    },
                    create: function () {
                        var nextCommandText = $('.divModelOptions').data('nextcommand');
                        // TODO: Next button should start off grey and become blue once a model is selected.
                        var button = $('<input type="button" value="' + nextCommandText + '" class="next-button">');
                        $('.divModelOptions').append(button);
                        this.bindHandlers(button);
                    },
                    init: function () {
                        this.create();
                    }
                },
                init: function () {
                    this.selection.init();
                    this.nextButton.init();
                }
            },
            validation: {
                focusOnError: function (messages) {
                    var message = $(messages[0]);
                    $('html, body').animate({
                        scrollTop: message.offset().top - 100
                    }, 500);
                },
                init: function () {
                    var visibleMessages;
                    $('form').submit(function () {
                        visibleMessages = $('.validation-message:visible, .validation .message:visible');
                        if (visibleMessages.length) {
                            mobileForms.validation.focusOnError(visibleMessages);
                        }
                    });
                }
            },
            init: function () {
                this.model.init();
                this.validation.init();
            }
        };
    })();
    $(function () {
        mobileForms.init();
    });
})();

Answer 1

有问题的代码很难理解，因为有很多函数并不是问题的一部分。自动隐藏错误消息元素也很令人困惑，特别是因为可以通过多次单击来附加多个setTimeout()功能。

通过将 CSS 设置为以下内容有助于查看正在发生的事情：

.divModelOptions input {
    display: block;
}

仅当由于else替代方案而data-min="1"和data-max="1"时，才会出现问题：

if (that.max > 1) {
} else {
    chosen[0].checked = false;
    chosen.parents('li').removeClass('selected');
    return true;
}

这是自that.max === 1以来输入的，因此第 2^次单击的项目始终导致第一个<input>的 checked 属性设置为 false，无论单击了哪个项目，然后所有<li>父项都删除了selected类。但是，由于您return true;则满足调用代码逻辑if条件。

if (that.validate.test(e)) {
    if (parent.hasClass('selected')) {
        parent.removeClass('selected');
            //remove check status to input
    } else {
        parent.addClass('selected');
        //add check status to input
    }
}

这会将selected类添加到新选择的<li>。

请注意，根据选择的第一个<li>是否是第一个选择的行为，您会得到不同的不一致行为。如果先选择第 2 个、第 3^个或第 4^个。

我试图减少答案中的代码，以解决在所选项目数低于或超过定义范围时显示消息的问题。所以它可能不完全是你所追求的，但它应该是一个(希望(更简化的起点。

js小提琴演示

JavaScript

(function () {
    var mobileForms = (function () {
        return {
            model: {
                selection: {
                    validate: {
                        inRange: function (e) {
                            var self = this,
                                chosen = $('input:checked', self.modelSelector),
                                minMessage = $('.min', self.modelSelector),
                                maxMessage = $('.max', self.modelSelector);
                            if (chosen.length === 0 || (chosen.length >= self.min && chosen.length <= self.max)) {
                                self.validation.slideUp(200);
                            } else {
                                maxMessage.toggle(chosen.length > self.max);
                                minMessage.toggle(chosen.length < self.min);
                                self.validation.slideDown(400);
                            }
                            return chosen.length <= self.max;
                        },
                        init: function () {
                            this.modelSelector = $('.divModelOptions');
                            this.validation = $('.validation', this.modelSelector);
                            this.min = parseInt(this.modelSelector.data('min'), 10);
                            this.max = parseInt(this.modelSelector.data('max'), 10);
                            this.validation.slideUp();
                            $('.min span').text(this.min);
                            $('.max span').text(this.max);
                        }
                    },
                    bindHandlers: function () {
                        var self = this;
                        $('input', this.modelSelector).click(function (e) {
                            var parent = $(this).closest('li');
                            parent.toggleClass('selected');
                            if (!self.validate.inRange()) {
                                parent.removeClass('selected');
                                return false; // stop checkbox receiving event
                            }
                        });
                    },
                    init: function () {
                        this.validate.init();
                        this.bindHandlers();
                    }
                },
                init: function () {
                    this.selection.init();
                }
            },
            init: function () {
                this.model.init();
            }
        };
    })();
    $(function () {
        mobileForms.init();
    });
})();

为了完整起见...

CSS(与问题相同(

.divModelOptions input {
    cursor: pointer;
    display: none;
    float: left;
}
.divModelOptions label {
    cursor: pointer;
}
.divModelOptions li.selected {
    border:1px solid red
}
.divModelOptions .validation li {
    display: none;
}

HTML(使用最大数据量和数据分钟数查看不同的示例(

<div data-max="2" data-min="2" class="divModelOptions">
    <ul class="validation">
        <li class="message min">At least <span></span> should be selected</li>
        <li class="message max">No more than <span></span> should be selected</li>
    </ul>
    <ul>
        <li>
            <label>
                <img alt="" src="http://placehold.it/30x30" />
                <input type="checkbox" id="Model" value="Model" name="Model" /><span rel="Model">Model</span>
            </label>
        </li>
        <li>
            <label>
                <img alt="" src="http://placehold.it/30x30" />
                <input type="checkbox" id="Model2" value="Model2" name="Model2" /><span rel="Model2">Model2</span>
            </label>
        </li>
        <li>
            <label>
                <img alt="" src="http://placehold.it/30x30" />
                <input type="checkbox" id="Model3" value="Model3" name="Model3" /><span rel="Model3">Model3</span>
            </label>
        </li>
        <li>
            <label>
                <img alt="" src="http://placehold.it/30x30" />
                <input type="checkbox" id="Model4" value="Model4" name="Model4" /><span rel="Model3">Model4</span>
            </label>
        </li>
    </ul>
</div>