0
我正在使用一个WordPress模板，它在主页上有一个jQuery轮播，并且在类别页面上有一些其他的jQuery好东西（切换和滑动条），它们都是单独工作的。我想复制所有类别页面上的滑块，但是当我添加它时，它会在两个方面中断jQuery。有人可以给我一个关于如何让他们与对方打好关系的建议吗？下面是2的代码片段：一页上有多个jQuery脚本？
<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错误。 – Fenton
你确定你已经在你的页面中包含了“jCarouselLite”插件js吗？ – ShankarSangoli
由于脚本的顺序，它可能会被搞乱。 – Mrchief