冲突的Jquery调用，似乎无法与另一个一起工作

时间：2011-10-26 20:27:42

标签： jquery ajax dynamic

所以我已经阅读了其他人关于这个问题的帖子，无论我如何组织它，仍然无法让我的工作，所以无论如何。

我基本上有一个带滑块和div的图库，我想要替换内容，目前只有滑块有效。这就是我的想法

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

所以第一个显然是我的jquery调用，然后下一个是我没有创建但在网上找到的滑块。

然后在我的页面中，我有以下代码来调用它，

<div id="biocontent">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit nec sem iaculis vitae laoreet sem convallis. Donec sed lorem ante, quis fermentum nisl. Nullam adipiscing fermentum rhoncus. Aenean dui lectus, condimentum sed aliquet a, euismod vitae dui. Donec tempus faucibus tortor, feugiat fringilla nibh posuere eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla a elit ut quam laoreet venenatis. Proin pharetra semper interdum. Phasellus porttitor imperdiet libero. Aenean ultricies rhoncus metus eget semper.
<br /><br />
Morbi rutrum ornare tortor, quis aliquam felis commodo et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed justo mauris, congue nec porttitor non, vehicula sed nisi. Praesent ultrices euismod massa, sit amet semper nisi elementum sit amet. Sed ut facilisis erat. Sed vestibulum ullamcorper magna, id euismod mauris posuere id. Aenean ac euismod mauris. Aliquam non mi ac sapien commodo adipiscing. Suspendisse nec felis a est convallis scelerisque. Mauris tempus pharetra euismod.

    </div>

    <div id="tS2" class="bioworkscroller">
        <div class="bioscollerContainer">
            <div class="bioscoller">

        <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a>
        <a href="#"><img src="img/thumbs/img4.jpg" /></a>
        <a href="#"><img src="img/thumbs/img5.jpg" /></a>


            </div>
        </div>
<a href="#" class="bioscollerPrevButton"></a>
<a href="#" class="bioscollerNextButton"></a>
    </div>

然后在下面我有我的所有javascript用于ajax调用和滑块，

   (function($) { 
   $(document).ready(function(){   
$("#links a").bind("click", function(e){ 
    e.preventDefault();
    var pageLocation = $(this).attr("href");
   $.ajax({ 
    url: pageLocation, 
    success: function(data){ 
        $("#biocontent").html(data); 
    },
    dataType : "html"
     });
});
}); })(jQuery)
jQuery.noConflict(); 
(function($){
window.onload=function(){ 
$("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
$("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
});
 }
 })(jQuery);

我的ajax开关在没有滑块的情况下工作在自己的文件中，但无法让它们都工作，我觉得这与'jQuery.noConflict（）'调用有关但是无法弄清楚如何获取围绕这个，当我在javascript控制台中运行它时没有出现错误。

非常感谢任何帮助

3 个答案:

答案 0 :(得分：1)

由于$（document）.ready是window.onload的好得多的包装，请将其删除并将其打包在一个doc.ready中。

(function($) { 
$(document).ready(function(){   
      $("#links a").bind("click", function(e){ 
         e.preventDefault();
         var pageLocation = $(this).attr("href");
         $.ajax({ 
              url: pageLocation, 
              success: function(data){ 
              $("#biocontent").html(data); 
           },
           dataType : "html"
         });
   });

   $("#tS1").thumbnailScroller({ 
       scrollerType:"hoverAccelerate", 
       scrollerOrientation:"horizontal", 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });

   $("#tS2").thumbnailScroller({ 
       scrollerType:"clickButtons", 
       scrollerOrientation:"horizontal", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:600, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });
   $("#tS3").thumbnailScroller({ 
       scrollerType:"hoverPrecise", 
       scrollerOrientation:"vertical", 
       scrollSpeed:2, 
       scrollEasing:"easeOutCirc", 
       scrollEasingAmount:800, 
       acceleration:4, 
       scrollSpeed:800, 
       noScrollCenterSpace:10, 
       autoScrolling:0, 
       autoScrollingSpeed:2000, 
       autoScrollingEasing:"easeInOutQuad", 
       autoScrollingDelay:500 
   });


}); 
})(jQuery)

我没有看到使用jQuery.noConflict（）的理由，或者您是否在页面中使用任何非jQuery脚本？

答案 1 :(得分：0)

在不知道你是否正确调用滚动条的情况下，在深入探讨之前还有一些问题需要解决：

  1. 我可能错了，但我认为你不需要自动执行jQuery包装器（模块模式？）[更新：你不需要它，但根据Floyd的回应它可能是一个最好的练习模式你会想要使用]
  2. 您不应该需要noConflict，因为您在页面上只有jQuery，没有其他框架
  3. 你有一个window.onload调用。但这是（某种程度上）准备好的文件已经在做什么。为了更准确，存在差异（jQuery也可以做窗口准备），但出于您的目的，您不应该需要它。准备好的文件不仅足够，而且更好。

    4. 据我所知，这是你打算做的事情：

    $(document).ready(function(){   // or shorthand version thereof

  $("#links a").bind("click", function(e){ 
    e.preventDefault();
    var pageLocation = $(this).attr("href");
    $.ajax({ 
      url: pageLocation, 
      success: function(data){ 
        $("#biocontent").html(data); 
      },
      dataType : "html"
    });
  });

  $("#tS1").thumbnailScroller({ 
    scrollerType:"hoverAccelerate", 
    scrollerOrientation:"horizontal", 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });

  $("#tS2").thumbnailScroller({ 
    scrollerType:"clickButtons", 
    scrollerOrientation:"horizontal", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:600, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });

  $("#tS3").thumbnailScroller({ 
    scrollerType:"hoverPrecise", 
    scrollerOrientation:"vertical", 
    scrollSpeed:2, 
    scrollEasing:"easeOutCirc", 
    scrollEasingAmount:800, 
    acceleration:4, 
    scrollSpeed:800, 
    noScrollCenterSpace:10, 
    autoScrolling:0, 
    autoScrollingSpeed:2000, 
    autoScrollingEasing:"easeInOutQuad", 
    autoScrollingDelay:500 
  });
});

    旁注：您可以通过将常用参数的映射传递到每个thumbnailScroller（）调用中来大大减少重复。如果滚动条可能有某些不同的行为，您可以使用.extend将地图（基本和扩展）连接在一起。

答案 2 :(得分：0)

试试这个：

$(function() {

    $("#links a").bind("click", function(e) {
        e.preventDefault();
        var pageLocation = $(this).attr("href");
        $.ajax({
            url: pageLocation,
            success: function(data) {
                $("#biocontent").html(data);
            },
            dataType: "html"
        });
    });


    $("#tS1").thumbnailScroller({
        scrollerType: "hoverAccelerate",
        scrollerOrientation: "horizontal",
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 800,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });
    $("#tS2").thumbnailScroller({
        scrollerType: "clickButtons",
        scrollerOrientation: "horizontal",
        scrollSpeed: 2,
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 600,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });
    $("#tS3").thumbnailScroller({
        scrollerType: "hoverPrecise",
        scrollerOrientation: "vertical",
        scrollSpeed: 2,
        scrollEasing: "easeOutCirc",
        scrollEasingAmount: 800,
        acceleration: 4,
        scrollSpeed: 800,
        noScrollCenterSpace: 10,
        autoScrolling: 0,
        autoScrollingSpeed: 2000,
        autoScrollingEasing: "easeInOutQuad",
        autoScrollingDelay: 500
    });

});
相关问题
最新问题