Skip to main content
Code Review

Return to Question

deleted 16 characters in body; edited tags; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

Optimized jquery script Script for simple feature tour

I create a simple feature tour sort of like what rdio and facebookFacebook are doing. This is my script - howHow can I make it better?

Html:HTML:

Optimized jquery script for simple feature tour

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?

Html:

Script for simple feature tour

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

HTML:

$(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>
$(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();
 }); 
});
<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>
$(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>
added 3015 characters in body
Source Link
$(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();
 }); 
});
 <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>
$(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();
 }); 
});
$(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();
 }); 
});
 <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>
Post Migrated Here from stackoverflow.com (revisions)
Source Link
Loading
default

AltStyle によって変換されたページ (->オリジナル) /