一页上有多个 jQuery 脚本?

发布于 11-30 13:52 字数 4921 浏览 0 评论 0原文

我正在使用一个 WordPress 模板,该模板在主页上有一个 jQuery 轮播,在类别页面上有一些其他 jQuery 好东西(切换和滑块),并且它们都单独工作。我想在所有类别页面上复制滑块,但是当我添加它时,它会破坏两个页面上的 jQuery。有人可以给我一个关于如何让他们彼此相处融洽的建议吗?这是 2 个代码片段:

<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>

...and

<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() { ) 和第二行 $< /code> 到 jQuery 但这并没有解决任何问题,我还尝试将 '.slider' 更改为 '.somethingslider' 因为。我看到 .slider 的另一个实例下面,但没有用任何帮助非常感谢!

I'm using a WordPress template that has a jQuery carousel on the homepage and some other jQuery goodies (toggles and sliders) on category pages, and they all work by themselves separately. I wanted to duplicate the slider on all category pages but when I add it, it breaks the jQuery on BOTH. Can someone give me a suggestion on how to get them to play nice with each other? Here's the 2 code snippets:

<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>

and

<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>

...and

<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>

...and the last one

<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>

The LAST THREE all work fine together but when I add the first one on the same page, they all break. I tried changing jQuery(document).ready(function($) { to $(document).ready(function() { and the second line $ to jQuery but that didn't fix anything. I also tried to change the '.slider' to '.somethingslider' because I see another instance of .slider below, but THAT didn't work. Any help is much appreciated!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

漫漫岁月2024-12-07 13:52:42

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

所有准备好的处理程序中更改此设置

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

jQuery(document).ready(function() {

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

Remove $ from all the function you are passing into ready method. However it will not make any difference because $ points to the main jQuery object itself.

Change this in all the ready handlers

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

By

jQuery(document).ready(function() {

And make sure you have included jCarouselLite plugin js into your page, then it should work fine.

苏佲洛2024-12-07 13:52:42

首先,您可以将所有四个 jQuery(document).ready(function($) { 的内容放在一起......不会产生任何影响。

我不得不想象有一个问题第一个脚本,这些对应哪些 DOM 元素?

First off, you can just place the contents of all four jQuery(document).ready(function($) { together.. wont make a difference.

I would have to imagine there is a problem in the first script. what DOM elements do these correspond to? can you post more?

难以启齿的温柔2024-12-07 13:52:42

该主题使用 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 个脚本就不用管了。谢谢大家的帮助!我正在向大家提问,但想在这里给出一个简洁的答案。

The theme was using an enqueue_script function to call jCarouselLite but it had an if statement wrapping it that caused it to be displayed only on the home page:

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

I simply removed the &&is_home() and that brought back the bottom 3 scripts' functionality. However, the carousel still wasn't working, so per @mblase75's suggestion above, I changed the class to an ID and voila, it worked! Here's my modified first code:

<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>

The only other change I had to make was to my stylesheet to reflect the new ID vs. Class change above. The other 3 scripts were left alone. Thank you all for your help! I am ^'ing everybody but wanted to give a concise answer here.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文