一页上有多个jQuery脚本？答案

【问题标题】：Multiple jQuery scripts on one page?一页上有多个jQuery脚本？
【发布时间】：2011-08-19 14:23:39
【问题描述】：

我使用的 WordPress 模板在主页上有一个 jQuery 轮播，在类别页面上有一些其他 jQuery 好东西（切换和滑块），它们都单独工作。我想在所有类别页面上复制滑块，但是当我添加它时，它会破坏两个 jQuery。有人可以给我一个关于如何让他们彼此相处融洽的建议吗？这是 2 个代码 sn-ps：

<script type="text/javascript">
// <![CDATA[
   /* featured listings slider */
   jQuery(document).ready(function($) {
      $('.slider').jCarouselLite({
         btnNext: '.next',
         btnPrev: '.prev',
         visible: 5,
         hoverPause: true,
         auto: 2800,
         speed: 1100,
         easing: 'easeOutQuint' // for different types of easing, see easing.js
      });
   });
// ]]>
</script>

和

<script type="text/javascript">
// <![CDATA[
// toggles the refine search field values
jQuery(document).ready(function($) {
    $('div.handle').click(function() {
        $(this).next('div.element').animate({
            height: ['toggle', 'swing'],
            opacity: 'toggle' }, 200
        );

        $(this).toggleClass('close', 'open');
        return false;
    });
    <?php foreach ( $_POST as $field => $val ) : ?>
    $('.<?php echo $field; ?> div.handle').toggleClass('close', 'open');
    $('.<?php echo $field; ?> div.element').show();
    <?php endforeach; ?>

});
// ]]>
</script>

...和

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#dist-slider').slider( {
            range: 'min',
            min: 0,
            max: 3000,
            value: <?php echo esc_js( isset( $_POST['distance'] ) ? intval( $_POST['distance'] ) : '50' ); ?>,
            step: 5,
            slide: function(event, ui) {
                $('#distance').val(ui.value + ' <?php echo $distance_unit; ?>');
            }
        });
        $('#distance').val($('#dist-slider').slider('value') + ' <?php echo $distance_unit; ?>');
    });
// ]]>
</script>

...还有最后一个

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#slider-range').slider( {
          range: true,
          min: <?php echo esc_js( intval( $cp_min_price ) ); ?>,
          max: <?php echo esc_js( intval( $cp_max_price ) ); ?>,
          step: 1,
          values: [ <?php echo esc_js( "{$amount[0]}, {$amount[1]}" ); ?> ],
          slide: function(event, ui) {
            <?php switch ( $cp_curr_symbol_pos ) {
                case 'left' :
                    ?>$('#amount').val('<?php echo $curr_symbol; ?>' + ui.values[0] + ' - <?php echo $curr_symbol; ?>' + ui.values[1]);<?php        
                    break;
                case 'left_space' : 
                ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + ui.values[0] + ' - <?php echo $curr_symbol; ?> ' + ui.values[1]);<?php
                    break;
                case 'right' :
                ?>$('#amount').val(ui.values[0] + '<?php echo $curr_symbol; ?> - ' + ui.values[1] + '<?php echo $curr_symbol; ?>' );<?php
                    break;
                case 'right_space' : 
                ?>$('#amount').val(ui.values[0] + ' <?php echo $curr_symbol; ?> - ' + ui.values[1] + ' <?php echo $curr_symbol; ?>' );<?php
                    break;
            } ?>
          }
        });
        <?php switch ( $cp_curr_symbol_pos ) {
            case 'left' :
                ?>$('#amount').val('<?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 1));<?php    
                break;
            case 'left_space' : 
            ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 1));<?php
                break;
            case 'right' :
            ?>$('#amount').val($('#slider-range').slider('values', 0) + '<?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + '<?php echo $curr_symbol; ?>');<?php
                break;
            case 'right_space' : 
            ?>$('#amount').val($('#slider-range').slider('values', 0) + ' <?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + ' <?php echo $curr_symbol; ?>');<?php
                break;
            } ?>

    });
// ]]>
</script>

最后三个都可以很好地协同工作，但是当我在同一页面上添加第一个时，它们都会中断。我尝试将jQuery(document).ready(function($) { 更改为$(document).ready(function() { 并将第二行$ 更改为jQuery 但这并没有解决任何问题。我还尝试将'.slider' 更改为'.somethingslider'，因为我在下面看到.slider 的另一个实例，但这不起作用。非常感谢任何帮助！

【问题讨论】：

如果您遇到任何特定错误，最好知道它们是什么 - 例如，如果您打开错误控制台 / Firebug / Dragonfly / Developer Tools 等并查找 JavaScript 错误。
你确定在你的页面中加入了jCarouselLite插件js吗？
所以你有多个 ready 处理程序但没有多个 jQuery 版本...
如果将第一个 sn-p 中的 $(".slider") 替换为像 $("#firstslider") 这样的 ID 引用会怎样？
因为一切都可能使用相同的 jQuery 库，你被允许在任何地方使用$。当您想同时使用另一个也需要使用 $ 的 JavaScript 库时，您通常会调用 noconflict 模式并将 $ 更改为 jQuery。这似乎不是这里的情况。所有的 jQuery 插件应该相互配合。您包括 jCarousel Lite 吗？您在控制台中看到的错误是什么？此外，在进一步排除故障之前，请尝试将所有内容恢复到您开始的位置......您尝试的一些事情也可能会破坏这一点。

标签： jquery wordpress slider jcarousellite

【解决方案1】：

从您传递给ready 方法的所有function 中删除$。但是它不会有任何区别，因为$ 指向主要的jQuery 对象本身。

在所有准备好的处理程序中更改它

jQuery(document).ready(function($) {

由

jQuery(document).ready(function() {

并确保您已将 jCarouselLite 插件 js 包含到您的页面中，那么它应该可以正常工作。

【讨论】：

【解决方案2】：

首先，您可以将所有四个jQuery(document).ready(function($) { 的内容放在一起.. 不会有所作为。

我不得不想象第一个脚本中存在问题。这些对应的 DOM 元素是什么？能多发点吗？

【讨论】：

【解决方案3】：

主题使用 enqueue_script 函数来调用 jCarouselLite，但它有一个 if 语句包装它，导致它只显示在主页上：

if ( get_option($app_abbr.'_enable_featured') == 'yes' && is_home() ) {

我只是删除了 &&is_home() 并恢复了底部 3 个脚本的功能。但是，轮播仍然无法正常工作，因此根据上述@mblase75 的建议，我将课程更改为 ID，瞧，它成功了！这是我修改后的第一个代码：

<script type="text/javascript">
// <![CDATA[
    /* featured listings slider */
    jQuery(document).ready(function($) {
        $('#myfirstslider').jCarouselLite({
            btnNext: '.next',
            btnPrev: '.prev',
            visible: 5,
            hoverPause: true,
            auto: 2800,
            speed: 1100,
            easing: 'easeOutQuint' // for different types of easing, see easing.js
        });
    });
// ]]>
</script>

我必须做的唯一其他更改是我的样式表以反映上面的新 ID 与类更改。其他 3 个脚本被单独留下。感谢大家的帮助！我正在为每个人提供帮助，但想在这里给出一个简洁的答案。

【讨论】：