patternjavascriptMinor
Switching some text labels when the first image of a carousel is active
Viewed 0 times
theimageactivelabelstextswitchingfirstsomewhencarousel
Problem
Is there any way I can simplify this inefficient piece of JavaScript?
$(function () {
var $carousel = $('#carousel');
var $switch = $('#switch');
var $header = $('#header');
var $submit = $('#submit');
$carousel.bind('slid', function() {
var index = $('#carousel .item').index($('#carousel .carousel-inner .active'));
if (index == 0) {
$header.text('Sign In');
$switch.text('Sign Up');
$submit.text('Sign In');
$submit.attr('form', 'sign_in');
} else {
$header.text('Sign Up');
$switch.text('Sign In');
$submit.text('Sign Up');
$submit.attr('form', 'sign_up');
}
});
});Solution
You could do this:
If you want to reduce the lines of code (with a slight negative impact to performance if this function gets called a lot), you could do this:
$(function () {
var $carousel = $('#carousel');
var $switch = $('#switch');
var $headerSubmit = $('#header, #submit');
var $submit = $('#submit');
var text_strings = [ 'Sign In', 'Sign Up' ];
var form_strings = [ 'sign_in', 'sign_up' ];
$carousel.bind('slid', function() {
var index = $('#carousel .item').index($('#carousel .carousel-inner .active'));
var sign_in = (index == 0);
$headerSubmit.text(text_strings[sign_in ? 1 : 0]);
$switch.text(text_strings[sign_in ? 0 : 1]);
$submit.attr('form', form_strings[sign_in ? 1 : 0]);
});
});If you want to reduce the lines of code (with a slight negative impact to performance if this function gets called a lot), you could do this:
$(function () {
var text_strings = [ 'Sign In', 'Sign Up' ];
var form_strings = [ 'sign_in', 'sign_up' ];
$('#carousel').bind('slid', function() {
var index = $('#carousel .item').index($('#carousel .carousel-inner .active'));
var sign_in = (index == 0);
$('#header, #submit').text(text_strings[sign_in ? 1 : 0]);
$('#switch').text(text_strings[sign_in ? 0 : 1]);
$('#submit').attr('form', form_strings[sign_in ? 1 : 0]);
});
});Code Snippets
$(function () {
var $carousel = $('#carousel');
var $switch = $('#switch');
var $headerSubmit = $('#header, #submit');
var $submit = $('#submit');
var text_strings = [ 'Sign In', 'Sign Up' ];
var form_strings = [ 'sign_in', 'sign_up' ];
$carousel.bind('slid', function() {
var index = $('#carousel .item').index($('#carousel .carousel-inner .active'));
var sign_in = (index == 0);
$headerSubmit.text(text_strings[sign_in ? 1 : 0]);
$switch.text(text_strings[sign_in ? 0 : 1]);
$submit.attr('form', form_strings[sign_in ? 1 : 0]);
});
});$(function () {
var text_strings = [ 'Sign In', 'Sign Up' ];
var form_strings = [ 'sign_in', 'sign_up' ];
$('#carousel').bind('slid', function() {
var index = $('#carousel .item').index($('#carousel .carousel-inner .active'));
var sign_in = (index == 0);
$('#header, #submit').text(text_strings[sign_in ? 1 : 0]);
$('#switch').text(text_strings[sign_in ? 0 : 1]);
$('#submit').attr('form', form_strings[sign_in ? 1 : 0]);
});
});Context
StackExchange Code Review Q#24538, answer score: 5
Revisions (0)
No revisions yet.