Question

我正在使用一个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>

...和

<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的另一个实例，但这不起作用。非常感谢任何帮助！

Answer 1

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

在所有现成的处理程序中更改此内容

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

通过

jQuery(document).ready(function() {

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

Answer 2

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

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

Answer 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个脚本单独留下。感谢大家的帮助！我是大家，但想在这里给出一个简明的答案。

一个页面上有多个jQuery脚本？

3 个答案: