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')传递到第二个代码中的ready函数中

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

[edit]只有这样，凯文B指出，如果你有其他代码使用$。我假设这个，因为你在第一个版本中使用了别名版本，但我想如果不看你还有什么，我就不能做出这个假设。

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

left: e.pageX + 40,

此后不需要逗号（IE会在此错误）。

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

Answer 2

我在代码中看到一些可能导致问题的问题。第一个是缺少的$。此外，功能可以放置在更好的位置。许多正在发生的事情与理解jQuery（文档）.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 ready函数之外通常是一个好主意，这样它就可以在全局级别访问。

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

运行多个JQuery代码

2 个答案: