一页上有多个 jQuery 脚本?
我正在使用一个 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 技术交流群。
发布评论
评论(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 个脚本就不用管了。谢谢大家的帮助!我正在向大家提问,但想在这里给出一个简洁的答案。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
从您传递给
ready
方法的所有function
中删除$
。然而它不会有任何区别,因为$
指向主jQuery
对象本身。所有准备好的处理程序中更改此设置
在
并确保您已将
jCarouselLite
插件 js 包含到您的页面中,然后它应该可以正常工作。Remove
$
from all thefunction
you are passing intoready
method. However it will not make any difference because$
points to the mainjQuery
object itself.Change this in all the ready handlers
By
And make sure you have included
jCarouselLite
plugin js into your page, then it should work fine.