up vote 2 down vote favorite
1

I create a simple feature tour sort of like what rdio and facebook are doing. This is my script - 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:

<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
    <div class="modal-footer">
    <span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
    <a href="#" id="tourblock-01" class="btn btn-primary active">Next</a>
    </div>
</div>

<div class="tour-block tr02">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
    <div class="modal-footer">
    <span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
    <a href="#" id="tourblock-02" class="btn btn-primary active">Next</a>
    </div>
</div>

<div class="tour-block tr03">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
    <div class="modal-footer">
    <span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
    <a href="#" id="tourblock-03" class="btn btn-primary active">Next</a>
    </div>
</div>

<div class="tour-block tr04">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
    <div class="modal-footer">
    <span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
    <a href="#" id="tourblock-04" class="btn btn-primary active">Next</a>
    </div>
</div>

<div class="tour-block tr05">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>Title Lorem Ipsum</h3>
</div>
<div class="modal-body">
<p>Content Lorem ipsum Content</p>
</div>
    <div class="modal-footer">
    <span class="tour-nmbrs"><a href="#" class="tour-step-01">1</a> <a href="#" class="tour-step-02">2</a> <a href="#" class="tour-step-03">3</a> <a href="#" class="tour-step-04">4</a> <a href="#" class="tour-step-05">5</a></span>
    <a href="#" class="closebtn">Close</a>
    </div>
</div>
share|improve this question
Can you post html too? – elclanrs Apr 20 '12 at 21:47
We would need to see your HTML to see what classes are on what elements to know how to best simplify. This should actually be in Code Review, not StackOverflow. – jfriend00 Apr 20 '12 at 21:51

migrated from stackoverflow.com Apr 22 '12 at 14:59

2 Answers

up vote 0 down vote accepted

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

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

(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 < 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));
share|improve this answer
playground on jsfiddle: jsfiddle.net/XmgpN – Bill Barry Apr 26 '12 at 22:44
Hmm, on load you should show the first and hide the others. – ANeves Apr 27 '12 at 9:36
I agree; to do that, change $t.html(replacement); to be $t.toggle(i === 0).html(replacement);. I would also scroll to each stop (and why write that yourself, use flesler.blogspot.com/search/label/jQuery.ScrollTo instead). – Bill Barry Apr 27 '12 at 13:01
up vote 0 down vote 
$("[id|=tourblock], a[class^=tour-step]").click(function () {
   $(".tour-block").hide();
   var id = $(this).attr('id').replace('tourblock-', '');
   if (!id) {
      id = $(this).attr('class').replace('tour-step-', '');
   }
   $(".tour-block.tr" + id).fadeIn();
});
share|improve this answer
hi, I posted the html to give everyone a better idea of what I'm trying to do. – Bizarro Zeldman Apr 25 '12 at 2:54

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.