与jQuery脚本冲突

时间:2011-01-01 18:59:31

标签: javascript jquery html conflict

我的HTML中有这些jQuery脚本,它们运行得很好......

<script type="text/javascript">
      $(function() {
        $('#iphone').crossSlide({
          sleep: 2,
          fade: 1
        }, [
          { src: 'images/screen1.png' },
          { src: 'images/screen2.png' },
          { src: 'images/screen3.png' }
        ])
      });
    </script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#features').hide();
        $('#more_features').click(function() {
            $('#features').slideToggle(500);
            return false;
        });
    });
    </script>

    <script type="text/javascript">
    $('a.toTop').click(function() {
        $('html, body').animate({scrollTop: '0px'}, 500);
        return false;
    });
    </script>

    <script type="text/javascript">
    $(function() {
        $('a.contactLink').click(function() {
            $('html, body').animate({scrollTop: '0px'}, 100);
            $('#risposta').hide();
            $('#formName').val('');
            $('#formEmail').val('');
            $('#formSubject').val('');
            $('#formMessage').val('');
            $('#mask').show().fadeTo('', 0.7);
            $('#contact').fadeIn();
            return false;
        });
        $('#mask').click(function() {
            $('#mask, #contact').stop().fadeOut('slow');
        });
    });
    </script>

    <script type="text/javascript">
    $(function() {
        $('a.newsletterLink').click(function() {
            $('html, body').animate({scrollTop: '0px'}, 100);
            $('#mce-responses').hide();
            $('#mce-NAME').val('');
            $('#mce-EMAIL').val('');
            $('#mask').show().fadeTo('', 0.7);
            $('#mc_embed_signup').fadeIn();
            return false;
        });
        $('#mask').click(function() {
            $('#mask, #mc_embed_signup').stop().fadeOut('slow');
        });
    });
    </script>

    <script type="text/javascript">
     $(document).ready(function(){
        $("#formSend").click(function(){

            var valid = '';
            var name = $("#formName").val();
            var mail = $("#formEmail").val();
            var subject = $("#formSubject").val();
            var messaggio = $("#formMessage").val();

            if (name.length<1) {
                valid += '<span>Please, fill name field.</span><br />';
            }
            if (!mail.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
                valid += '<span>Please, enter a valid email address.</span><br />';
            }
            if (subject.length<1) {
                valid += '<span>Please, fill subject field.</span><br />';
            }

            if (valid!='') {
                $("#risposta").fadeIn("slow");
                $("#risposta").html("<span><b>Error:</b></span><br />"+valid);
                $("#risposta").css("background-color","#ffc0c0");
            }
            else {
                var datastr ='name=' + name + '&mail=' + mail + '&subject=' + subject + '&messaggio=' + encodeURIComponent(messaggio);
                $("#risposta").css("display", "block");
                $("#risposta").css("background-color","#FFFFA0");
                $("#risposta").html("<span>Sending message...</span>");
                $("#risposta").fadeIn("slow");
                setTimeout("send('"+datastr+"')",2000);
            }
            return false;
        });
    });
    function send(datastr){
        $.ajax({    
            type: "POST",
            url: "contactForm.php",
            data: datastr,
            cache: false,
            success: function(html) {
            $("#risposta").fadeIn("slow");
            $("#risposta").html('<span>Message successfully sent!</span>');
            $("#risposta").css("background-color","#e1ffc0");
            setTimeout('$("#risposta").fadeOut("slow")',2000);
            }
        });
    }
    </script>  

现在我添加了一个使用Mailchimp服务的简报表单。要使用它我必须使用jQuery脚本,但当我在HTML中添加它时,其他脚本不起作用!在<head></head>代码中,我有以下脚本:

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="jquery.cross-slide.min.js" type="text/javascript"></script>
    <script src="http://downloads.mailchimp.com/js/jquery.validate.js" type="text/javascript"></script>
    <script src="http://downloads.mailchimp.com/js/jquery.form.js" type="text/javascript"</script>
<!-- Using a newer version 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> -->  

最后,这是简报的jQuery脚本(我不能改变它!):

<script type="text/javascript">
    var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='NAME';ftypes[1]='text';var err_style = '';
    try{
        err_style = mc_custom_error_style;
    } catch(e){
        err_style = '';
    }
    var mce_jQuery = jQuery.noConflict(true);
    mce_jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', errorStyle: err_style, onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = mce_jQuery("#mc-embedded-subscribe-form").validate(options);
      options = { url: 'http://matthewlabs.us2.list-manage.com/subscribe/post-json?u=88d77c3091b8c0deb9fb740c6&id=2de218cbc7&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        mce_jQuery('#mce_tmp_error_msg').remove();
                        mce_jQuery('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                mce_jQuery(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                mce_jQuery(':hidden', this).each(
                                    function(){
                                        if ( fields[0].value=='MM' && fields[1].value=='DD' && fields[2].value=='YYYY' ){
                                            this.value = '';
                                        } else if ( fields[0].value=='' && fields[1].value=='' && fields[2].value=='' ){
                                            this.value = '';
                                        } else {
                                            this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                        }
                                    });
                            });
                        return mce_validator.form();
                    }, 
                    success: mce_success_cb
                };
      mce_jQuery('#mc-embedded-subscribe-form').ajaxForm(options);

    });
    function mce_success_cb(resp){
        mce_jQuery('#mce-success-response').hide();
        mce_jQuery('#mce-error-response').hide();
        if (resp.result=="success"){
            mce_jQuery('#mce-'+resp.result+'-response').show();
            mce_jQuery('#mce-'+resp.result+'-response').html(resp.msg);
            mce_jQuery('#mc-embedded-subscribe-form').each(function(){
                this.reset();
            });
        } else {
            var index = -1;
            var msg;
            try {
                var parts = resp.msg.split(' - ',2);
                if (parts[1]==undefined){
                    msg = resp.msg;
                } else {
                    i = parseInt(parts[0]);
                    if (i.toString() == parts[0]){
                        index = parts[0];
                        msg = parts[1];
                    } else {
                        index = -1;
                        msg = resp.msg;
                    }
                }
            } catch(e){
                index = -1;
                msg = resp.msg;
            }
            try{
                if (index== -1){
                    mce_jQuery('#mce-'+resp.result+'-response').show();
                    mce_jQuery('#mce-'+resp.result+'-response').html(msg);            
                } else {
                    err_id = 'mce_tmp_error_msg';
                    html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                    var input_id = '#mc_embed_signup';
                    var f = mce_jQuery(input_id);
                    if (ftypes[index]=='address'){
                        input_id = '#mce-'+fnames[index]+'-addr1';
                        f = mce_jQuery(input_id).parent().parent().get(0);
                    } else if (ftypes[index]=='date'){
                        input_id = '#mce-'+fnames[index]+'-month';
                        f = mce_jQuery(input_id).parent().parent().get(0);
                    } else {
                        input_id = '#mce-'+fnames[index];
                        f = mce_jQuery().parent(input_id).get(0);
                    }
                    if (f){
                        mce_jQuery(f).append(html);
                        mce_jQuery(input_id).focus();
                    } else {
                        mce_jQuery('#mce-'+resp.result+'-response').show();
                        mce_jQuery('#mce-'+resp.result+'-response').html(msg);
                    }
                }
            } catch(e){
                mce_jQuery('#mce-'+resp.result+'-response').show();
                mce_jQuery('#mce-'+resp.result+'-response').html(msg);
            }
        }
    }
    </script>  

为什么其他脚本不起作用?你能帮帮我吗? 谢谢!

3 个答案:

答案 0 :(得分:2)

您不能在同一页面上使用两个版本的jQuery。您必须使两个脚本都适用于一个版本(最好是较新的版本)。

我会首先尝试删除对1.2.6的引用,看看会发生什么。

答案 1 :(得分:1)

我建议使用Firebug来追踪究竟是什么错误导致它无法正常工作。然后,一旦看到错误消息,这将更容易进行故障排除。

答案 2 :(得分:1)

我通过从<head></head>标记中删除此引用来解决此问题:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>  

此外,我还在Mailchimp脚本中更改了这行代码:

var mce_jQuery = jQuery.noConflict();  

用这个:

var mce_jQuery = jQuery;  

非常感谢大家! ;)