我正在使用一个 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下面的另一个实例，但这不起作用。任何帮助深表感谢！