jQuery конфликтует с другим на одной странице

Question

jQuery конфликтует с другим на одной странице

0

У меня проблема с моим jQuery noConflict. Страница, на которую я пытаюсь включить jQuery, имеет раскрывающуюся навигацию, которая уже использует правило noConflict(). Могу ли я использовать более одного noConlfict на странице для разных анимаций? У меня будет три разные функции jQuery, выполняемые одновременно на одной странице. Отдельно они работают нормально, но после их добавления на страницу они перестают работать. Ниже приведен один из jQuery, который нужно запустить. Может ли кто-нибудь помочь мне добавить к нему правило noConflict()?

$(function() {
var current = 1;


var iterate = function(){
    var i = parseInt(current+1);
    var lis = $('#rotmenu').children('li').size();
    if(i>lis) i = 1;
    display($('#rotmenu li:nth-child('+i+')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate,5000);

$('#rotmenu li').bind('click',function(e){
    clearTimeout(slidetime);
    display($(this));
    e.preventDefault();
});

function display(elem){
    var $this   = elem;
    var repeat  = false;
    if(current == parseInt($this.index() + 1))
        repeat = true;

    if(!repeat)
        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
            $(this).animate({'opacity':'0.7'},700);
        });

    current = parseInt($this.index() + 1);

    var elem = $('a',$this);

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

    var info_elem = elem.next();
    $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
        $('h1',$(this)).html(info_elem.find('.info_heading').html());
        $(this).animate({'left':'0px'},400,'easeInOutQuad');
    });

    $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
        $('p',$(this)).html(info_elem.find('.info_description').html());
        $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
    })
    $('#rot1').prepend(
    $('<img/>',{
        style   :   'opacity:0',
        className : 'bg'
    }).load(
    function(){
        $(this).animate({'opacity':'1'},600);
        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
            $(this).remove();
        });
    }
).attr('src', info_elem.find('.info_image').html())
);
}

});

user3015352 22 нояб. 2013, в 00:52

Источник

4

Просто используйте jQuery(function($) {...}); вместо этого обернуть ваш код
adeneo 21 нояб. 2013, в 22:57
3

Смотри, тебе действительно нужно включить одну версию jQuery, а не одну на виджет.
Pointy 21 нояб. 2013, в 22:58
0

@Pointy Что, если все виджеты называют одну и ту же версию jQuery?
user3015352 22 нояб. 2013, в 16:27
0

@ user3015352, тогда вам нужно импортировать его только один раз.
Pointy 22 нояб. 2013, в 16:34

Показать ещё 2 комментария

Теги:

javascript

jquery

html

performance

jquery-ui

1 ответ

Ещё вопросы

Просто используйте jQuery(function($) {...}); вместо этого обернуть ваш код
Смотри, тебе действительно нужно включить одну версию jQuery, а не одну на виджет.
@Pointy Что, если все виджеты называют одну и ту же версию jQuery?
@ user3015352, тогда вам нужно импортировать его только один раз.

mthie · Answer 1 · 2013-11-21T22-28-00.000Z

Поскольку @adaneo уже прокомментировал, вы всегда должны обернуть код в метод jQuery, но после этого вы даже должны вызвать noConflict с первым параметром true:

$.noConflict(true);

Это полностью удаляет ваш jQuery из переменной jQuery и $ и возвращает объект jQuery. Вы можете использовать это возвращаемое значение, чтобы использовать его в своем коде, предоставив его вашему объекту или методу в качестве параметра:

function MyFunction($) {
    $(doSomeThing);
}
MyFunction($.noConflict(true));