使用幻灯片画廊时的jQuery冲突



我在使用滑块画廊时无法在按钮上调用功能。当我从项目中删除所有滑块内容时,它可以正常工作。

    var dec_Options=[];
    var dec_Details=[];

    window.onload = function(){
        // fix height width of screen....
        var width=(parseInt($(document).width()));  
        var height=(parseInt($(window).height()));
        $('body').css({'height': height,'width':width});
        $('#page').css({'height': height,'width':width});       
    }   

    $(document).ready(function (){
       //slider initialize............
        $("#slider").easySlider({
                    continuous: true,
                    nextId: "slider1next",
                    prevId: "slider1prev"
        });

   //get data from ajax..............       
     syncDecorationDetails(function(decoOption,decoDetails){
        dec_Options = decoOption;
        //alert('inside------'+dec_Options);
        //options=dec_Options;
        dec_Details = decoDetails;
    }); 


 });

    //on click function called when button clicks...........
    function loadGalleryImage(){
         alert('fd');
    }

html:

<!DOCTYPE HTML>
<html>
<head>
    <script src="js/jquery-1.8.3.js"></script>
    script src="js/syncData.js" type="text/javascript"></script>
// below script added is the file showqn above.............
    <script src="js/decor.js" type="text/javascript"></script>
//.........................
    <script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
    <div id="content">  
        <div id="slider">
            <ul>                
                <li><img src="chori1.jpg" /></a></li>
                <li><img src="chori2.jpg" /></a></li>
            </ul>
        </div>  
    </div>
</div>
<div>   
<button onclick="loadGalleryImage()">Try it</button>
</div>
</body>
</html>

现在,如果我在此按钮之前在div中添加一个按钮,则仅在Div外部工作,而不是Div。

<div id="decorationSelection" >
        <button onclick="loadGalleryImage()"></button>
</div>  
//...this button below work  but f  the above code of div and button inside is  there 
 <button onclick="loadGalleryImage()">Try it</button>

错误在这里 ->

// below script added is the file showqn above.............
<script src="js/decor.js" type="text/javascript"></script>
//.........................
<script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>

您说decor.js是引用easySlider函数的文件。但是,在之后,您不会加载Easyslider脚本。这将永远无法正常工作。只需将Easyslider脚本放置上方 即可将easyslider函数缺乏的控制台中的错误。

<script type="text/javascript" src="sliderjs/easySlider1.7.js"></script>
<script src="js/decor.js" type="text/javascript"></script>

这就是应该的外观。

最新更新