时间戳

首页 > 解决方案 > 使用 JQuery 对同一元素执行多个函数

html - 使用 JQuery 对同一元素执行多个函数

问题描述

希望我问得正确；随时纠正。

我有以下代码，它使时间轴在鼠标进入该 div 时出现在我的页面上，并在鼠标离开该 div 到另一个 div 时消失。

var nums = [1, 2, 3, 4, 5];
$(document).ready(function(){
  $.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
  }
  
  for(i=0; i<=nums.length; i++){
    $(".tl-item" + nums[i]).mouseenter(function(){
      for(j=0; j <= nums.length; j++){
        $(this).find('#timeline'+ nums[j]).stop(true, true).fadeIn(100, 'easeOutCubic');
      }
    });
  }

   for(i=0; i<=nums.length; i++){
    $(".tl-item" + nums[i]).mouseleave(function(){
      for(j=0; j <= nums.length; j++){
        $(this).find('#timeline'+ nums[j]).stop(true, true).fadeOut(1000, 'easeOutCubic');
      }
    });
  }
});

我接下来要做的是当时间线可见时单击一年，因此会弹出一个带有图表的模式。我试着先看看代码是否会发生点击事件，但什么也没发生。点击事件未注册的原因可能是什么？

$(document).on('click','.test li', function(){
   alert($(this).text());

 <div id="timeline1">
              <ul class="test">
                <!-- <li data-toggle="modal" data-target="#modalnew" data-whatever="1970" class="openmodal"><a >1970</a></li> -->
                <li class="active"><a href="" class="timelineYear">1970</a></li>
                <li><a href="" class="timelineYear">1971</a></li>
                <li><a href="" class="timelineYear">1972</a></li>
                <li><a href="" class="timelineYear">1973</a></li>
                <li><a href="" class="timelineYear">1974</a></li>
                <li><a href="" class="timelineYear">1975</a></li>
                <li><a href="" class="timelineYear">1976</a></li>
                <li><a href="" class="timelineYear">1977</a></li>
                <li><a href="" class="timelineYear">1978</a></li>
                <li><a href="" class="timelineYear">1979</a></li>
                <li><a href="" class="timelineYear">1980</a></li>
              </ul>
            </div>

我的 jquery 包位于 body 标签的末尾，并尝试将其移至 head 标签，并尝试将其保留在头部和正文的末尾，但没有运气。此外，我尝试了 console.log 而不是警报，但控制台中没有出现任何内容。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

任何想法都会非常受欢迎。

标签： htmljquery

解决方案

您的点击事件有一些语法错误。我已经为您测试了这一点作为起点。当您开始使用 jQuery 时，我建议您使用今天可用的最新版本 query-3.6.0.min.js 。

<html>
<head>
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var nums = [1, 2, 3, 4, 5];
    //
    $(document).ready(function() {

      $(document).on('click','.test li', function(){
         alert($(this).text());
         return false;
      });
    
      $.easing.easeOutCubic = function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
      }
  
      for(i=0; i<=nums.length; i++){
        $(".tl-item" + nums[i]).mouseenter(function(){
          for(j=0; j <= nums.length; j++){
            $(this).find('#timeline'+ nums[j]).stop(true, true).fadeIn(100, 'easeOutCubic');
          }
        });
      }

      for(i=0; i<=nums.length; i++){
        $(".tl-item" + nums[i]).mouseleave(function(){
          for(j=0; j <= nums.length; j++){
            $(this).find('#timeline'+ nums[j]).stop(true, true).fadeOut(1000, 'easeOutCubic');
          }
        });
      }
    });
  </script>
</head>

<body>

<div id="timeline1">
 <ul class="test">
   <!-- <li data-toggle="modal" data-target="#modalnew" data-whatever="1970" class="openmodal"><a >1970</a></li> -->
   <li class="active"><a href="" class="timelineYear">1970</a></li>
   <li><a href="" class="timelineYear">1971</a></li>
   <li><a href="" class="timelineYear">1972</a></li>
   <li><a href="" class="timelineYear">1973</a></li>
   <li><a href="" class="timelineYear">1974</a></li>
   <li><a href="" class="timelineYear">1975</a></li>
   <li><a href="" class="timelineYear">1976</a></li>
   <li><a href="" class="timelineYear">1977</a></li>
   <li><a href="" class="timelineYear">1978</a></li>
   <li><a href="" class="timelineYear">1979</a></li>
   <li><a href="" class="timelineYear">1980</a></li>
 </ul>
</div>

</body>
</html>

推荐阅读