将多个jQuery悬停函数压缩为一个

时间：2014-12-18 07:26:06

标签： jquery html

我有两个函数，每个函数都在自己独立的.js文件中（通过脚本标记调用html文件）。我想将它们组合成一个文件，如果可能的话，甚至是一个函数。在图像悬停时，一个函数交换html h5文本，另一个函数交换html p文本，用于在每个函数中声明的文本，具体取决于图像id标记。当悬停停止时，它会返回原来的html文本。

jQuery对我来说很陌生，所以我真的很感激任何见解。如果需要，我可以提供网页链接。

jQuery h5交换：

$(document).ready
(function() {
// Hover over image swaps h5
var text=$('h5').text();
$('#one').hover(function() {
   $('h5').text('Jane Doe');
 },function(){
   $('h5').text(text);
});
$('#two').hover(function() {
   $('h5').text('John Doe');
},function(){
   $('h5').text(text);        
});
$('#three').hover(function() {
   $('h5').text('Janet Doe');
},function(){
   $('h5').text(text);        
});
$('#four').hover(function() {
   $('h5').text('Janessa Doe');
},function(){
   $('h5').text(text);        
});
$('#five').hover(function() {
   $('h5').text('Sarah Richards');
},function(){
   $('h5').text(text);       
});
$('#six').hover(function() {
   $('h5').text('John Merten'); 
},function(){
   $('h5').text(text);
});
})(Query);

jQuery p Swap：

$(document).ready
(function() {
// Hover over image swaps h5
var text=$('p').text();
$('#one').hover(function() {
   $('p').text('Aliquam luctus libero a luctus congue. Nam sit amet dui felis. Integer at est eros. Curabitur quis nibh scelerisque, mattis tortor ut, sagittis ex. Pellentesque pharetra posuere libero, ac sollicitudin nisl tincidunt quis. Suspendisse pulvinar posuere nunc quis euismod. Nam vel ornare magna. Quisque tellus ante, interdum ut efficitur at, varius vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque vitae dui quis quam elementum vulputate. In hac habitasse platea dictumst. Pellentesque nec ultricies enim, eget convallis erat. Vestibulum ac convallis ex. Nunc id aliquam odio. Ut a mauris diam. Pellentesque augue nisi.');
 },function(){
   $('p').text(text);
});
$('#two').hover(function() {
   $('p').text('Vivamus nec tempus turpis. Integer pellentesque, dui quis tempus scelerisque, massa leo ultrices lorem, vel tincidunt mi quam at ante. Nam id varius orci. Curabitur eget sapien malesuada, aliquet urna eu, dignissim purus. Nam nec nisi feugiat orci malesuada dapibus. Nunc interdum ultrices mi, et imperdiet ligula lobortis non. Donec erat libero, accumsan in nisl nec, consectetur volutpat velit. Cras maximus odio at finibus porta. Nulla porttitor ullamcorper nunc, id blandit libero eleifend eu. Maecenas sit amet ultrices ipsum. Sed tristique elementum urna non maximus. Aenean aliquet blandit est, quis dapibus nulla. Cras luctus varius scelerisque. Ut congue id lectus.');
},function(){
   $('p').text(text);        
});
$('#three').hover(function() {
   $('p').text('Pellentesque dictum vulputate elit at rhoncus. Quisque sodales rhoncus elit, eu tincidunt lacus scelerisque eu. Suspendisse et tempor nibh, eu porttitor augue. Morbi rhoncus nisi in nunc mollis, ac congue orci sodales. Integer lorem sapien, pulvinar vel tempor id, molestie sit amet leo. Praesent suscipit suscipit vehicula. Sed aliquam tellus at ligula rhoncus, sed interdum massa dictum. Nunc eget euismod mi. Etiam molestie molestie ex, id imperdiet neque semper sit amet. Nullam convallis felis ac auctor elementum. Duis porttitor elementum dignissim. Curabitur dictum fermentum metus. Cras tristique commodo dui, sit amet posuere odio consequat vitae. Suspendisse at malesuada ipsum, eu.');
},function(){
   $('p').text(text);        
});
$('#four').hover(function() {
   $('p').text('Quisque rhoncus, enim id congue bibendum, justo felis luctus risus, nec malesuada augue neque vel risus. Quisque pulvinar porttitor mi ut faucibus. Cras laoreet ullamcorper risus, at porttitor risus gravida sed. Nullam eleifend vel dolor id faucibus. Etiam nec nisl nibh. Proin id lorem ut arcu sagittis condimentum at auctor nisl. Mauris in nisl eget mauris vulputate egestas. Vestibulum varius neque eu ullamcorper pulvinar. Proin vitae eros sed diam dignissim pharetra ac pharetra ante. Donec commodo rutrum arcu id sodales. Aenean tincidunt tortor id pulvinar euismod. Ut id viverra felis, a ultricies dui. Morbi vel congue mauris. Maecenas convallis eget.');
},function(){
   $('p').text(text);        
});
$('#five').hover(function() {
   $('p').text('Sarah Richards is a California licensed Landscape Architect with over 10 years of professional experience in the bay area. Having grown up in Californias Central Valley and studied at UC Davis, Sarah has a deep interest in Californias natural and agricultural plant systems and has been involved in garden-based learning programs. Sarah loves the creative process and the opportunity landscape architecture provides for synthesizing many different disciplines, ideas, and outcomes. With a strong background in all phases of landscape design, Sarah is inspired by the human enjoyment of and connection to the built and natural outdoor environment.');
},function(){
   $('p').text(text);       
});
$('#six').hover(function() {
   $('p').text('John Merten is a native bay area resident and a California licensed Landscape Architect with 23 years of experience. He leads the studio with a deep appreciation and vast knowledge for our inspiring and dramatic natural environment. A believer in the collaborative efforts among disciplines, John engages with architects and clients to generate the creation of unique landscapes. His strategic solutions, attention to detail, and small scale niche have gained recognition to celebrate a combination of art and the built form in a poetically balanced context and program.'); 
},function(){
   $('p').text(text);
});
})(Query);

HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Studio Green</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap custom CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- Typekit custom fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <script src="js/respond.min.js"></script>

    <!-- custom icons -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="fonts/flexslider-icon.eot">

</head>

<body>
    <!-- row 1: static navbar -->
    <nav class="navbar navbar-default navbar-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
        </div><!-- navbar toggle -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="process.html">PROCESS</a></li>
            <li class="active"><a href="#">OFFICE</a></li>
            <li><a href="contact.html">CONTACT</a></li>
          </ul>
        </div><!--/nav-collapse -->
      </div><!-- container -->
    </nav><!-- navbar -->

    <!-- row 1: body -->
    <div class="container">
        <div class="row centered">

            <!-- sidebar -->
            <aside class="panel-group col-lg-2 col-med-3 col-sm-3" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                      RESIDENTIAL
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">2</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">3</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">4</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">5</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">6</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">7</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">8</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">9</span></a></li>
                        <li><a href="#">PROJECT <span class="spaced">10</span></a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="#">
                      SCHOOLS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="#">
                      PARKS
                    </a>
                  </h4>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                  <h4 class="panel-title">
                    <a href="#">
                      HOSPITALITY
                    </a>
                  </h4>
                </div>
              </div>              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFive">
                  <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                      ELEMENTS
                    </a>
                  </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
                  <div class="panel-body">
                    <ul>
                        <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
                        <li><a href="#">ENTRY</a></li>
                        <li><a href="#">FENCES</a></li>
                        <li><a href="#">FIRE</a></li>
                        <li><a href="#">LIGHTING</span></a></li>
                        <li><a href="#">PAVING</a></li>
                        <li><a href="plants.html">PLANTS</a></li>
                        <li><a href="#">POOLS</a></li>
                        <li><a href="#">SEATING</a></li>
                        <li><a href="#">SCULPTURE</a></li>
                        <li><a href="#">STAIRS</a></li>
                        <li><a href="#">SUSTAINABILITY</a></li>
                        <li><a href="#">WATER</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </aside>

            <!-- employee portraits -->     
            <div class="col-lg-10 col-md-9 col-sm-9">
                <div class="row mt-lg">
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="one" src="img/team_01.jpg" class="img-responsive">
                    </div>
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="two" src="img/team_02.jpg" class="img-responsive">
                    </div>
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="three" src="img/team_03.jpg" class="img-responsive">
                    </div>
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="four" src="img/team_04.jpg" class="img-responsive">
                    </div>
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="five" src="img/team_05.jpg" class="img-responsive">
                    </div>
                    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
                        <img id="six" src="img/team_06.jpg" class="img-responsive">
                    </div>
                </div><!-- /row -->
                <div class="row">
                    <div class="info">
                        <h5>TEAM</h5>
                        <p>Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative</p>
                    </div>
                </div><!-- /row -->
            </div><!-- /portraits -->
                <!-- address -->
                <address>232 SIR FRANCIS DRAKE BLVD</br>
                SAN ANSELMO, CA 94960</br>
                415 721 0905</address>

        </div><!--/row -->
    </div><!--/container -->


    <!-- javaspcript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.image-hover-h5-swap.js"></script>
    <script src="js/jquery.image-hover-p-swap.js"></script>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

重新设计可能是

var ct = {
  one: {
    p: 'p 1',
    h: 'h 1'
  },
  two: {
    p: 'p 2',
    h: 'h 2'
  },
  three: {
    p: 'p 3',
    h: 'h 3'
  },
  four: {
    p: 'p 4',
    h: 'h 4'
  },
  five: {
    p: 'p 5',
    h: 'h 5'
  },
  six: {
    p: 'p 6',
    h: 'h 6'
  }
}

var $p = $('p'),
  $h = $('h5'),
  ptext = $p.text(),
  htext = $h.text();
$('.team-box img').hover(function() {
  var obj = ct[this.id];
  $p.text(obj.p);
  $h.text(obj.h);
}, function() {
  $p.text(ptext);
  $h.text(htext);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row mt-lg">
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="one" src="img/team_01.jpg" class="img-responsive" />
  </div>
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="two" src="img/team_02.jpg" class="img-responsive" />
  </div>
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="three" src="img/team_03.jpg" class="img-responsive" />
  </div>
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="four" src="img/team_04.jpg" class="img-responsive" />
  </div>
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="five" src="img/team_05.jpg" class="img-responsive" />
  </div>
  <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
    <img id="six" src="img/team_06.jpg" class="img-responsive" />
  </div>
</div>
<!-- /row -->
<div class="info">
  <h5>TEAM</h5>

  <p>Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration
    landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative</p>
</div>

答案 1 :(得分：0)

另一种解决方案，使用attribute或HTML 5 data- Attributes

html 

<div class="row mt-lg">

    <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
        <img src="" htext="Jane Doe" ptext="Aliquam luctus libero a ...">
        <!-- set htext and ptext for img tag --->
        <!-- if use data attribute, should be data-htext="Jane Doe" data-ptext="Aliquam luctus libero a ..." -->
     </div> 

     <div class="team-box col-lg-2 col-md-2 col-sm-4 col-xs-4">
         <img src="" class="img-responsive" htext="Ja " ptext=" libero a ...">
     </div>

        ...........  

    </div>

    <div class="info">
        <h5>TEAM</h5>
            <p>Restraint, mi</p>
    </div>

<强>的javascript 

$(function()
{
$('img').hover(function() {
   $('h5').text($(this).attr('htext'));// or $(this).data('htext')
    $('p').text($(this).attr('ptext'));// or $(this).data('ptext')
 },function(){
   $('h5').text('');
     $('p').text('');
});
});

这里是demo http://jsfiddle.net/c66k0d1p/2/

数据属性演示http://jsfiddle.net/c66k0d1p/3/

相关问题
最新问题