1

您好，感谢您的帮助。我正在使用 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/timcoolley/B5wa4/5/ 我不确定是什么破坏了代码。在这个过程中的任何帮助都会很棒。

这是阅读人们共享的所有内容后编辑的代码。问题仍然存在。滑块坏了，点击区域的东西不起作用。

<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>
4

2 回答 2

1

$如果您要像这样使用它，则需要在第二个代码中将它传递给您的就绪函数$('.popup')

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

[编辑] 正如 Kevin B 指出的那样，如果您有其他代码使用 $. 我假设了这一点，因为您在第一个版本中使用了别名版本，但我想如果不看看您还有什么，我就无法做出这个假设。

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

left: e.pageX + 40,

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

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

于 2013-01-14T22:45:58.870 回答
0

我在代码中看到了一些可能导致问题的问题。第一个是缺少的$。此外，功能可以放置在更好的位置。发生的很多事情都与理解 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 就绪事件将 $ 传递给函数时，它允许使用 $ 代替 jQuery。新参数不需要以 $ 开头。这实际上只是一种风格的编程选择。var foo 与 var $foo 相同，$(".slider") 与 jQuery(".slider") 相同。这些参数可以简单地称为 foo，就像您的 timeInterval、transition_time 和 time_between_slides 参数一样。

其次，您只需要评论给出的一个准备好的功能。并且通常将一个函数放置在 jQuery 就绪函数之类的东西之外是一个好主意，这样它就可以在全局级别访问。

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

于 2013-01-15T05:05:24.630 回答