I've just created my first plugin, but I think I've written too much bloated code. Could you point me to the right direction?
$.fn.replaceme = function() {
function add_essentials(element) {
var native_btn = element;
native_type = native_btn.attr('type');
native_btn.each(function() {
var n_btn = $(this);
n_btn.next('label').addClass('label-replacement');
n_btn.wrap('<div class="' + native_type + ' input-container"></div>');
n_btn.parent('.input-container').append('<span class="' + native_type + ' input-replacement"></div>');
});
}
function replace_default_action(element) {
var input = element;
group = input.attr('name');
$('input[name="' + group + '"]').each(function() {
var input_select = $(this);
if (input_select.is(':checked')) {
input_select.siblings('.input-replacement').addClass('selected');
} else {
input_select.siblings('.input-replacement').removeClass('selected');
}
});
}
function label_action(element) {
element.prevAll('.input-container').children('.styled-input').prop('checked', 'checked').trigger('change');
}
function live_check() {
$('.styled-input:checked').each(function() {
$(this).siblings('.input-replacement').addClass('selected');
});
};
return this.each(function() {
var $this = $(this);
add_essentials($this);
live_check();
$('body').on('change', '.styled-input', function() {
replace_default_action($this);
});
$('body').on('click', '.label-replacement', function() {
label_action($this);
});
});
}
$('.styled-input').replaceme();
groupandnative_typeare globals to start. Edit, also if you'd construct a demo of what your code does on jsfiddle/bin I'd appreciate it \$\endgroup\$