patternjavascriptMinor

Script for simple feature tour

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

scripttoursimpleforfeature

Problem

I create a simple feature tour sort of like what rdio and Facebook are doing. How can I make it better?

$(function () {
    $('a.close, a.closebtn').click(function () {
        $(".tour-block").hide();
    });

    $('a.tour-step-01').click(function () {
        $(".tour-block").hide();
        $(".tour-block.tr01").fadeIn();
    });

    $('#tourblock-01, a.tour-step-02').click(function () {
        $(".tour-block").hide();
        $(".tour-block.tr02").fadeIn();
    });

    $('#tourblock-02, a.tour-step-03').click(function () {
        $(".tour-block").hide();
        $(".tour-block.tr03").fadeIn();
    });

    $('#tourblock-03, a.tour-step-04').click(function () {
        $(".tour-block").hide();
        $(".tour-block.tr04").fadeIn();
    });       
});

HTML:


×
Title Lorem Ipsum

Content Lorem ipsum Content

    
    1 2 3 4 5
    Next
    

×
Title Lorem Ipsum

Content Lorem ipsum Content

    
    1 2 3 4 5
    Next
    

×
Title Lorem Ipsum

Content Lorem ipsum Content

    
    1 2 3 4 5
    Next
    

×
Title Lorem Ipsum

Content Lorem ipsum Content

    
    1 2 3 4 5
    Next
    

×
Title Lorem Ipsum

Content Lorem ipsum Content

    
    1 2 3 4 5
    Close

Solution

If you could simplify your html, I would do something like this:


    Title Lorem Ipsum
    Content Lorem ipsum Content

(repeat this for each tour block on the site)

Then you could do something much more generic for your tour like this:

(function ($) {
    "use strict";
    $(function () {
        var $tour = $(".tour-block"),
            len = $tour.length,
            i,
            steps = '';

        for (i = 0; i ' + (i + 1) + '';
        }

        $tour.each(function (i) {
            var $t = $(this),
                title = $t.children('h3').html(),
                content = $t.children('p').html(),
                replacement = '';
            replacement += '';
            replacement += ' ×';
            replacement += ' ' + title + '';
            replacement += '';
            replacement += '';
            replacement += ' ' + content + '';
            replacement += '';
            replacement += '';
            replacement += ' ';
            replacement += steps;
            replacement += ' ';
            if (i + 1 === len) {
                replacement += ' Close';
            } else {
                replacement += ' Next';
            }
            replacement += '';
            $t.html(replacement);
        });

        $tour.on('click', 'a', function (e) {
            var $a = $(this),
                type = $a.data('type');

            e.preventDefault();

            if (type === 'close') {
                $tour.hide();
            } else if (type === 'skip') {
                $tour.hide().eq(+$a.data('index')).show();
            } else if (type === 'next') {
                $tour.hide().eq(+$a.data('index') + 1).show();
            }
        });
    });
}(jQuery));

Code Snippets

<div class="tour-block">
    <h3>Title Lorem Ipsum</h3>
    <p>Content Lorem ipsum Content</p>
</div>

(function ($) {
    "use strict";
    $(function () {
        var $tour = $(".tour-block"),
            len = $tour.length,
            i,
            steps = '';

        for (i = 0; i < len; i++) {
            steps += ' <a href="#" data-index="' + i + '" data-type="skip">' + (i + 1) + '</a>';
        }

        $tour.each(function (i) {
            var $t = $(this),
                title = $t.children('h3').html(),
                content = $t.children('p').html(),
                replacement = '';
            replacement += '<div class="modal-header">';
            replacement += ' <a href="#Close" class="close" data-type="close" data-dismiss="modal">×</a>';
            replacement += ' <h3>' + title + '</h3>';
            replacement += '</div>';
            replacement += '<div class="modal-body">';
            replacement += ' <p>' + content + '</p>';
            replacement += '</div>';
            replacement += '<div class="modal-footer">';
            replacement += ' <span class="tour-nmbrs">';
            replacement += steps;
            replacement += ' </span>';
            if (i + 1 === len) {
                replacement += ' <a href="#" data-type="close" class="btn btn-primary active">Close</a>';
            } else {
                replacement += ' <a href="#" data-type="next" data-index="' + i + '" class="btn btn-primary active">Next</a>';
            }
            replacement += '</div>';
            $t.html(replacement);
        });

        $tour.on('click', 'a', function (e) {
            var $a = $(this),
                type = $a.data('type');

            e.preventDefault();

            if (type === 'close') {
                $tour.hide();
            } else if (type === 'skip') {
                $tour.hide().eq(+$a.data('index')).show();
            } else if (type === 'next') {
                $tour.hide().eq(+$a.data('index') + 1).show();
            }
        });
    });
}(jQuery));

Context

StackExchange Code Review Q#11077, answer score: 2

Revisions (0)

No revisions yet.