Script for simple feature tour

Question

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:

<div class="tour-block tr01">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal"&g×ばつ</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"&g×ばつ</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"&g×ばつ</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"&g×ばつ</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"&g×ばつ</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>

• elclanrs: Can you post html too?
• jfriend00: 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.

Answer 1

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"&g×ばつ</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));

• Bill Barry: playground on jsfiddle: jsfiddle.net/XmgpN
• ANeves: Hmm, on load you should show the first and hide the others.
• Bill Barry: 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).