4
\$\begingroup\$

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">×</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>
\$\endgroup\$
  • \$\begingroup\$ Can you post html too? \$\endgroup\$ – elclanrs Apr 20 '12 at 21:47
  • \$\begingroup\$ 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. \$\endgroup\$ – jfriend00 Apr 20 '12 at 21:51
2
\$\begingroup\$

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));
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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