运行多个JQuery代码

Question

嗨，感谢您的帮助。我使用WordPress来运行多个jQuery函数。只要我添加第二个，它就会破坏第一个代码。我无法弄清楚这是为什么。

<script type="text/javascript"> 
var timeInterval = null, transition_time = 0, time_between_slides = 4000; 
jQuery(document).ready(function ($) { 

    /* This is for the slider */ 
    var $slider = $('.slider'); 
    var $sliderLi = $slider.find('li'); 

    $sliderLi.hide(); 
    //$slider.find('li:first').addClass('active').fadeIn(transition_time); 
    slideShow(); 
    timeInterval = setInterval(slideShow, transition_time + time_between_slides); 

    function slideShow() { 
     var i = $slider.find('li.active').index(); 

     $sliderLi.eq(i).removeClass('active').fadeOut(transition_time); 

     if (i == -1 || $sliderLi.length == i + 1) { 
      $slider.find('li:first').addClass('active').fadeIn(transition_time); 
     } else { 
      $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time); 
     } 
    }; 

    $slider.mouseenter(function() { 
     clearInterval(timeInterval); 
    }).mouseleave(function() { 
     timeInterval = setInterval(slideShow, transition_time + time_between_slides); 
    }); 

}); 

</script> 

第二个代码

<script type="text/javascript"> 
jQuery(document).ready(function() { 

    var $popup = $('.popup'); 

    $('area').on({ 
     click : function(e){ 
     var $this = $(this), 
      $obj = $('#'+$this.prop('alt')); 

     $popup.text($obj.text()).css({ 
      top: e.pageY + 10, 
      left: e.pageX + 40, 
     }).show(); 
     }; 

}); 
</script> 

我已经试过这样做两种不同的方式。首先是插入第一个代码底部的第二个代码。这最终打破了第一个代码，第二个代码没有工作。我也试图分裂，因为它在这里。第二个代码仍然无法正常工作，即使它正在运行http://jsfiddle.net/timlcooley/B5wa4/5/我不确定什么是破坏代码。在这个过程中任何帮助都会很棒。

这是阅读人们共享的所有内容后编辑的代码。问题仍然存在。滑块断开，clickon区域不起作用。

<script type="text/javascript"> 

var timeInterval = null, transition_time = 0, time_between_slides = 4000; 
var $slider = $('.slider'); 
var $sliderLi = $slider.find('li'); 

var $popup = $('.popup'); 
jQuery(document).ready(function ($) { 

    /* This is for the slider */ 


    $sliderLi.hide(); 
    //$slider.find('li:first').addClass('active').fadeIn(transition_time); 
    slideShow(); 
    timeInterval = setInterval(slideShow, transition_time + time_between_slides); 

    function slideShow() { 
     var i = $slider.find('li.active').index(); 

     $sliderLi.eq(i).removeClass('active').fadeOut(transition_time); 

     if (i == -1 || $sliderLi.length == i + 1) { 
      $slider.find('li:first').addClass('active').fadeIn(transition_time); 
     } else { 
      $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time); 
     } 
    }; 

    $slider.mouseenter(function() { 
     clearInterval(timeInterval); 
    }).mouseleave(function() { 
     timeInterval = setInterval(slideShow, transition_time + time_between_slides); 
    }); 

/* This is for the popup feature */ 
    $('area').on({ 
     click : function(e){ 
     var $this = $(this), 
      $obj = $('#'+$this.prop('alt')); 

     $popup.text($obj.text()).css({ 
      top: e.pageY + 10, 
      left: e.pageX + 40 
     }).show() 
     }; 

}); 
</script> 

Answer 1

您需要将$传递到您准备功能的第二代码，如果你要使用它像$('.popup')

jQuery(document).ready(function ($) { 

[编辑]这是唯一的情况下，凯文乙指出，如果你有其他代码使用$。我假设这是因为你在第一个版本中使用了别名版本，但是我想我不能假设你没有看到你有什么。

但是，在第二个代码片段中有几个语法错误。

left: e.pageX + 40, 

这不需要逗号后它（IE会出错）。

当你关闭你的点击功能时，你不需要分号。

Answer 2

我发现有几个问题会导致问题。首先是缺少的$。而且，功能可以放置在更好的位置。很多事情与理解jQuery（document）.ready（function（$）{在jQuery中意味着什么）的理解有关，你可以再来看看我的一些培训，同时试试这个：

<script type="text/javascript"> 
var timeInterval = null, transition_time = 0, time_between_slides = 4000, popup = null, slider = null, sliderLi = null; 

jQuery(document).ready(function ($) { 

    /* This is for the slider */ 
    slider = $('.slider'); 
    sliderLi = slider.find('li'); 

    sliderLi.hide(); 
    //slider.find('li:first').addClass('active').fadeIn(transition_time); 
    slideShow(); 
    timeInterval = setInterval(slideShow, transition_time + time_between_slides); 

    slider.mouseenter(function() { 
     clearInterval(timeInterval); 
    }).mouseleave(function() { 
     timeInterval = setInterval(slideShow, transition_time + time_between_slides); 
    }); 

    popup = $('.popup'); 

    $('area').on({ 
     click : function(e){ 
     var area = $(this); 
     var target = $('#' + area.prop('alt')); 

     popup.text(target.text()).css({ 
      top: e.pageY + 10, 
      left: e.pageX + 40 
     }).show(); 
     }; 

}); 

function slideShow() { 
    var i = slider.find('li.active').index(); 

    sliderLi.eq(i).removeClass('active').fadeOut(transition_time); 

    if (i == -1 || sliderLi.length == i + 1) { 
     slider.find('li:first').addClass('active').fadeIn(transition_time); 
    } else { 
     sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time); 
    } 
} 
</script> 

过多使用$符号实际上是不必要的。当你通过$与jQuery的ready事件的功能，它允许在地方的jQuery的使用$的。新的参数来启动不要求和$是一样的，这真的只是一种风格的编程选择，var foo和var $ foo是一样的，$（“。slider”）和jQuery（“。slider”）是一样的，参数可以简单地称为foo，比如你的timeInterval，transition_time和time_between_slides参数。

其次，您只需要一个就绪功能，如评论所示。在jQuery就绪函数之外放置一个函数通常是一个好主意，以便它可以在全局级别访问。

我们将不得不看看这是否适合您，但它应该是朝着正确方向迈出的一步。享受，J