0
  • 我希望能够选择图像（li），选择项的数量取决于（主 div）上的 data-max 和 data-min

问题出在所选功能中，我正在删除列表中项目的选中状态和所选类别

所以它一直有效，直到我选择了顶部然后它变得混乱我需要将验证更改为只返回 true 或 false

演示 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();
    });

})();
4

1 回答 1

0

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

通过将您的 CSS 设置为：

.divModelOptions input {
    display: block;
}

仅在以下情况data-min="1"下才会出现问题：data-max="1"else

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

这是因为that.max === 1所以第二个点击的项目总是导致第一个 <input>的选中属性设置为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 。

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

jsFiddle 演示

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（使用 data-max 和 data-min 查看不同的示例）

<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>
于 2013-04-10T16:33:45.480 回答