- 我希望能夠選擇一個圖像(li),選擇項的數量取決於data-max和data-min on(主要格)
在所選擇的功能,我在刪除列表中的項目的檢查狀態,並選擇類問題jquery切換li基於data-max和data-min驗證消息
所以它的工作,直到我選擇最上面的一個那麼它就會犯糊塗 我需要將驗證更改爲僅返回true或false
DEMO 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();
});
})();
什麼是你的問題?我真的不知道你在問什麼。 – 2013-04-09 14:40:55
另外:在問題本身**中包含所有相關的代碼和標記**,不要只是鏈接(甚至不包括jsFiddle,儘管小提琴是一個很好的*補充*)。爲什麼:http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-forputing-code-in-the-question – 2013-04-09 14:41:28
我的代碼太長了。所以我認爲小提琴會有所幫助。 – DD77 2013-04-09 14:46:00