Question

我有this site，我尝试在jQuery中添加一个名为facebox的联系表单，当我为联系表单添加此代码时，样式中的滑块和样式无法正常工作：

<script type="text/javascript" src="formulario/jquery.js"></script>

我如何解决这个问题，以便联系表格可以正常使用？

问题解释：

网站代码：

<script src="javascripts/home_packaged.js" type="text/javascript"></script>
<link href="stylesheets/home_packaged.css" media="screen" rel="stylesheet" type="text/css" />
 <!-- THIS IS MY ORIGINAL LIBRARIES JQUERY CODE  -->
        <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
         <script type="text/javascript" src="javascripts/jquery.min.js"></script>
         <script type="text/javascript" src="javascripts/jquery.selectbox-0.5.js"></script>
         <script type="text/javascript" src="javascripts/jquery.colorbox.js"></script>

        <!-- DDSlider jQuery Plugin - VERY IMPORTANT -->
        <script type="text/javascript" src="javascripts/jquery.DDSlider.min.js"></script>

        <!-- Let's start the slider -->
        <script type="text/javascript">

        //triggers the slider
        $(document).ready(function() {
            $('#Items1').selectbox();
             $('#Items2').selectbox();
              $('#Items3').selectbox();
               $('#Items4').selectbox();
                $('#Items5').selectbox();
                 $('#Items6').selectbox();
                  $('#Items7').selectbox();
                   $('#Items8').selectbox();
                    $('#Items9').selectbox();
                     $('#Items10').selectbox();
                     $(".example5").colorbox();
            $('#yourSliderId').DDSlider({

                nextSlide: '.slider_arrow_right',
                prevSlide: '.slider_arrow_left',
                selector: '.slider_selector'

                });

        });


        </script>

<script type="text/javascript">$(document).ready(function(){jQuery.ajaxSetup({'beforeSend':function(xhr){xhr.setRequestHeader("Accept","text/javascript")}})
$("#q").autocomplete({url:'/categories.js',mustMatch:false});$("#q").autocomplete('/categories',function(event,data,formatted){if(data)
document.location.href='/categories/'+data[1];});});</script>
<script type="text/javascript">$(document).ready(function(){$('img.menu_class').click(function(){$('ul.the_menu2').hide();$('ul.the_menu3').hide();$('ul.the_menu').slideToggle('medium');});});$(document).ready(function(){$('a.menu_class').click(function(){$('ul.the_menu2').hide();$('ul.the_menu3').hide();$('ul.the_menu').slideToggle('medium');});});$(document).ready(function(){$('img.menu_class2').click(function(){$('ul.the_menu').hide();$('ul.the_menu3').hide();$('ul.the_menu2').slideToggle('medium');});});$(document).ready(function(){$('img.menu_class3').click(function(){$('ul.the_menu').hide();$('ul.the_menu2').hide();$('ul.the_menu3').slideToggle('medium');});});</script>
<script type="text/javascript">(function($){$.fn.extend({customStyle:function(options){if(!$.browser.msie||($.browser.msie&&$.browser.version>6)){return this.each(function(){var currentSelected=$(this).find(':selected');$(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css({position:'absolute',opacity:0,fontSize:$(this).next().css('font-size')});var selectBoxSpan=$(this).next();var selectBoxWidth=parseInt($(this).width())-parseInt(selectBoxSpan.css('padding-left'))-parseInt(selectBoxSpan.css('padding-right'));var selectBoxSpanInner=selectBoxSpan.find(':first-child');selectBoxSpan.css({display:'inline-block'});selectBoxSpanInner.css({width:selectBoxWidth,display:'inline-block'});var selectBoxHeight=parseInt(selectBoxSpan.height())+parseInt(selectBoxSpan.css('padding-top'))+parseInt(selectBoxSpan.css('padding-bottom'));$(this).height(selectBoxHeight).change(function(){selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');});});}}});})(jQuery);$(function(){$('select.styled').customStyle();});</script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery('#mycarousel').jcarousel();});</script>
<script type="text/javascript">$(document).ready(function(){$('#slider1').s3Slider({timeOut:4000});});</script>
<script type="text/javascript">$(document).ready(function()
{$(".tab_content-n").hide();$("ul.tabs-n li:first").addClass("active").show();$(".tab_content-n:first").show();$("ul.tabs-n li").click(function()
{$("ul.tabs-n li").removeClass("active");$(this).addClass("active");$(".tab_content-n").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false;});});</script>


<!-- then I ADD THIS CODE FOR ADD A CONTACT FORM AND THE ERRORS BEGIN  -->

<script type="text/javascript" src="formulario/jquery.js"></script>
<script type="text/javascript" src="formulario/jquery.form.js"></script>
<script src="formulario/facebox/facebox.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
     $(".contimage").hover(function() {
            $(this).animate({
                opacity:1
            },200);
        }, function() {
            $(this).animate({
                opacity:0.8
            },200);
        });
        $('#submitform').ajaxForm({
            target: '#error',
            success: function() {
            $('#error').fadeIn('slow');
            }
    });
$('a[rel*=facebox]').facebox()
     }); 
</script>

此处也可以：http://pastebin.com/vQrSx0GU

Answer 1

在加载jQuery插件之后，看起来你的jquery代码才会被添加。这样：

<script type="text/javascript" src="formulario/jquery.js"></script>

应该到来之前

<script type="text/javascript" src="javascripts/jquery.DDSlider.min.js"></script>

另外，我建议为每个selectbox元素添加一个类，也许是“selectBoxItems”，然后对该类进行操作。

        $('#Items1').selectbox();
            $('#Items2').selectbox();
            $('#Items3').selectbox();
            $('#Items4').selectbox();
            $('#Items5').selectbox();
            $('#Items6').selectbox();
            $('#Items7').selectbox();
            $('#Items8').selectbox();
            $('#Items9').selectbox();
            $('#Items10').selectbox();
            $(".example5").colorbox();
        $('#yourSliderId').DDSlider({
            nextSlide: '.slider_arrow_right',
            prevSlide: '.slider_arrow_left',
            selector: '.slider_selector'
        });
    });

这将改为

$(".selectBoxItems").selectbox();
$('#yourSliderId').DDSlider({
    nextSlide: '.slider_arrow_right',
    prevSlide: '.slider_arrow_left',
    selector: '.slider_selector'
});

你能在这里发布特定于问题的代码，包括HTML和JS（最好是格式化的）吗？

与jquery和形式冲突

1 个答案: